:root {
    --primary-dark-grey: #202124; 
    --secondary-dark-grey: #303134; /* Slightly lighter than primary for cards */
    --tertiary-grey: #5f6368; 
    --border-grey: #4a4a4a; /* Darker border for dark theme */
    --background-light-grey: #27292d; /* Darker card/element background */
    --page-background-grey: #1a1c1e; /* Even darker page background */
    
    --primary-purple: #9575cd; /* Lighter purple for dark theme */
    --light-purple-hover-bg: rgba(149, 117, 205, 0.15); 
    --accent-yellow: #fff176; /* Lighter yellow */
    --accent-yellow-hover: #fff59d; /* Slightly lighter yellow for hover */
    --accent-yellow-hover-bg: rgba(255, 241, 118, 0.1);
    --text-on-primary-dark: #e8eaed; 
    --text-on-purple: #ffffff; 
    --text-on-yellow: var(--primary-dark-grey);
    --danger-red: #f28b82; /* Lighter red, e.g., from Google's dark theme */
    --warning-orange: #fdd835; /* For validation messages */

    /* Button Specific Greys */
    --btn-primary-bg: var(--primary-purple);
    --btn-primary-text: var(--text-on-purple);
    --btn-primary-hover-bg: #7e57c2; /* Slightly darker purple for hover */

    --btn-secondary-bg: var(--secondary-dark-grey);
    --btn-secondary-text: var(--text-on-primary-dark);
    --btn-secondary-border: var(--tertiary-grey);
    --btn-secondary-hover-bg: var(--tertiary-grey);
    --btn-secondary-hover-border: var(--border-grey);
    
    /* Instruction Banner Green for Dark Theme */
    --accent-green-bg: #2e7d32; /* Darker green background */
    --accent-green-text: #c8e6c9; /* Light green text */
    --accent-green-border: #388e3c; /* Medium green border */

    /* Task Completion Green for Dark Theme */
    --task-complete-bg: #1e4620; /* Darker green for completed task bg */
    --task-complete-border: #2e7d32; 
    --task-complete-level-bg: #66bb6a; /* Brighter green for level */
    --task-complete-level-text: #1a1c1e; /* Dark text on bright green */
    --btn-done-bg: transparent;
    --btn-done-text: #81c784; /* Lighter green for done button */
    --btn-done-border: #81c784; 
    --btn-done-hover-bg: rgba(129, 199, 132, 0.1); 
    --btn-undo-bg: transparent;
    --btn-undo-text: var(--tertiary-grey);
    --btn-undo-border: var(--border-grey);
    --btn-undo-hover-bg: var(--background-light-grey);

    /* Print Button Green Theme */
    --btn-print-bg: #66bb6a; 
    --btn-print-text: #1a1c1e;
    --btn-print-border: #66bb6a;
    --btn-print-hover-bg: #4caf50; 
    --btn-print-hover-border: #4caf50;
    --btn-print-focus-shadow: 0 0 0 2px rgba(102, 187, 106, 0.5);

    /* Timer Tool */
    --timer-display-bg: var(--primary-dark-grey);
    --timer-button-bg: var(--primary-purple);
    --timer-button-text: var(--text-on-purple);
    --timer-button-hover-bg: #7e57c2;

    /* New Green Button Theme (for "Need Task Ideas?") */
    --btn-green-theme-bg: #43a047; /* Slightly different green */
    --btn-green-theme-text: #ffffff;
    --btn-green-theme-border: #43a047;
    --btn-green-theme-hover-bg: #388e3c;

    /* Daily Focus Wave Green */
    --wave-fill-color: #66bb6a; /* Brighter green for wave */
    --wave-empty-bg: var(--secondary-dark-grey);

    /* Coin Icon and Promo Text */
    --coin-gold: #FFD700;
    --coin-promo-text-green: #81c784; /* Light green for text */
    --coin-promo-keyword-yellow: var(--accent-yellow); /* Using existing accent yellow */

    /* Max widths for tailwind compatibility */
    --max-w-md: 28rem;
    --max-w-xl: 36rem;
}

html { scroll-behavior: smooth; }
body {
    font-family: 'Roboto', 'Noto Sans SC', 'Noto Sans Arabic', 'Arial', sans-serif;
    margin: 0;
    background-color: var(--page-background-grey); 
    color: var(--text-on-primary-dark);      
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 14px; 
}

/* Basic Layout */
header {
    background-color: var(--primary-dark-grey);
    color: var(--text-on-primary-dark);
    box-shadow: 0 1px 2px 0 rgba(0,0,0,.3);
    border-bottom: 1px solid var(--secondary-dark-grey);
    width: 100%;     
    z-index: 1000; 
    position: relative; 
    padding: 0; 
}

#h_tr {
    padding: 0.5rem 0;
}

#snav {
    background-color: var(--secondary-dark-grey);
    border-top: 1px solid var(--border-grey);
}


header .nlnk { 
    color: var(--text-on-primary-dark);
    text-decoration: none;
    padding: 0.25rem 0.5rem; 
    border-radius: 0.25rem;
    transition: background-color 0.2s, color 0.2s, text-decoration 0.2s;
    font-size: 0.875rem; 
    white-space: nowrap; 
}
header .nlnk:hover {
    background-color: var(--secondary-dark-grey);
    color: var(--primary-purple); 
}

header span.nlnk {
    cursor: default;
}


main {
    position: relative; 
    z-index: 10;
    padding-top: 1rem; 
    padding-bottom: 2rem; 
}
footer { 
    background-color: var(--primary-dark-grey); 
    border-top: 1px solid var(--secondary-dark-grey); 
    position: relative; 
    z-index: 10;
    padding: 1rem 0;
}

/* Header Coin Promotion */
.hrit {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    align-items: flex-end; /* Align to the right */
    gap: 0.25rem; /* Small gap between items */
}
#cns { /* Renamed from header-coin-promo */
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem; /* Space above the promo text */
}
.cicn {
    width: 1.25rem; /* 20px */
    height: 1.25rem; /* 20px */
    fill: var(--coin-gold);
    display: inline-block;
    vertical-align: middle;
}
.cptx {
    font-size: 0.75rem; /* Smaller text for promo */
    color: var(--coin-promo-text-green);
    line-height: 1.3;
}
.cptx strong {
    color: var(--coin-promo-keyword-yellow);
    font-weight: bold;
}


/* Header User Auth & Coins Styles */
#uase {
    display: flex;
    align-items: center;
    gap: 0.5rem; 
}
#uase input[type="text"],
#uase input[type="password"] {
    background-color: var(--secondary-dark-grey);
    border: 1px solid var(--border-grey);
    color: var(--text-on-primary-dark);
    padding: 0.375rem 0.625rem; 
    font-size: 0.75rem; 
    border-radius: 0.25rem;
    width: 100px; 
    text-transform: uppercase; 
}
#uase input[type="text"]::placeholder,
#uase input[type="password"]::placeholder {
    color: var(--tertiary-grey);
    text-transform: none; 
}
#uase input[type="text"]:focus,
#uase input[type="password"]:focus {
    border-color: var(--primary-purple);
    box-shadow: 0 0 0 0.15rem var(--light-purple-hover-bg); 
}
#uase .avm {
    font-size: 0.65rem; 
    color: var(--warning-orange);
    display: block; 
    margin-top: 0.125rem;
    width: 100px; 
    text-align: left;
}
.aig {
    display: flex;
    flex-direction: column;
}

#ucod { 
    font-size: 0.875rem;
    color: var(--accent-yellow); 
    font-weight: 500;
    display: flex; /* To align icon and text */
    align-items: center;
}
#ucod .cicn {
    width: 1em; /* Size relative to font */
    height: 1em;
    margin-right: 0.25em;
}
#ucod .ty3 { 
    color: var(--accent-yellow) !important;
}
#aimg {
    font-size: 0.75rem;
    color: var(--danger-red); 
    background-color: rgba(240, 139, 130, 0.05); 
    border: 1px solid var(--tertiary-grey); 
    padding: 0.5rem; 
    border-radius: 0.25rem;
    margin-top: 0.25rem;
    text-align: left; 
    line-height: 1.4;
}
#aimg strong {
    color: var(--text-on-primary-dark);
}


/* Header Search & Right Link */
#hsec {
    flex-grow: 1; /* Allow it to grow */
    max-width: var(--max-w-xl); /* Increased from md for wider search */
    display: flex;
    align-items: center;
}
#hsec input[type="search"] {
    background-color: var(--secondary-dark-grey);
    border-color: var(--border-grey);
    color: var(--text-on-primary-dark);
    padding: 0.5rem 0.875rem; 
    font-size: 0.875rem; 
    width: 100%; /* Make input take full width of its container */
}
#hsec input[type="search"]::placeholder {
    color: var(--tertiary-grey);
}
#hsec input[type="search"]:focus {
    border-color: var(--primary-purple);
    box-shadow: 0 0 0 0.2rem var(--light-purple-hover-bg);
}

#hs_l {
    color: var(--accent-yellow); 
}
#hs_l:hover {
    color: var(--accent-yellow-hover); 
}

#hr_l:hover {
    text-decoration: underline; 
}


/* Footer Search */
#fss {
    padding: 1rem 0;
}
#fsd {
    color: var(--tertiary-grey);
    font-size: 0.875rem; 
    max-width: 600px;
}
#fsi {
    background-color: var(--secondary-dark-grey);
    border-color: var(--border-grey);
    color: var(--text-on-primary-dark);
}
#fsi::placeholder {
    color: var(--tertiary-grey);
}
#fsi:focus {
    border-color: var(--primary-purple);
    box-shadow: 0 0 0 0.2rem var(--light-purple-hover-bg);
}


.con { max-width: 1280px; margin: 0 auto; padding: 0 1rem; } 
section { padding: 1.5rem 0; } 
section:last-child { border-bottom: none; }

/* Typography */
h1.sttl { 
    font-size: 1.1rem; 
    font-weight: 500; 
    color: var(--text-on-primary-dark);
}
h1, h2, h3 {
   color: var(--text-on-primary-dark); 
   margin-bottom: 0.75rem;
   font-weight: 500; 
}
h2.stit {
    font-size: 1.5rem; 
    font-weight: 600; 
}
.crd h3, .crd label { 
   color: var(--text-on-primary-dark); 
   font-weight: 500; 
}
.crd .ctit { 
    font-size: 1.125rem; 
    font-weight: 600; 
}


#strg h2.stit,
#pln h2.stit,
#stra h2.stit,
#usta h2.stit,
#ctcs h2.stit {
     color: var(--text-on-primary-dark);
     font-weight: 600; 
}

.tlnk {
    color: var(--primary-purple);
    text-decoration: none;
}
.tlnk:hover {
    text-decoration: underline;
    color: var(--primary-purple);
}

/* Cards */
.crd {
    background-color: var(--secondary-dark-grey); 
    color: var(--text-on-primary-dark); 
    border-radius: 0.375rem; 
    box-shadow: 0 1px 2px 0 rgba(0,0,0,.2), 0 1px 3px 1px rgba(0,0,0,.15);
    margin-bottom: 1rem;
    padding: 1rem; 
}
#plcl > .crd:last-child,
#prcl > .crd:last-child {
    margin-bottom: 0;
}


.crd .tg5 { color: var(--tertiary-grey); }
.crd .tg6 { color: #b0bec5; } 
.crd .ty7 { color: var(--accent-yellow); }


/* Buttons */
.btn {
    padding: 0.5rem 1rem;
    border-radius: 0.25rem; 
    font-weight: 500;
    font-size: 0.875rem; 
    line-height: 1.25rem; 
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, color 0.15s ease-in-out;
    text-transform: none; 
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.b_sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
}
.b_xs { 
    padding: 0.25rem 0.5rem;
    font-size: 0.65rem;
    line-height: 1;
}
.b_lg {
    padding: 0.625rem 1.25rem; 
    font-size: 0.9375rem; 
}
.b_pr { 
    background-color: var(--btn-primary-bg);
    color: var(--btn-primary-text);
}
.b_pr:hover {
    background-color: var(--btn-primary-hover-bg);
    box-shadow: 0 1px 1px 0 rgba(0,0,0,.14),0 2px 1px -1px rgba(0,0,0,.12),0 1px 3px 0 rgba(0,0,0,.2);
}
.b_sc { 
    background-color: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
    border: 1px solid var(--btn-secondary-border);
}
.b_sc:hover {
    background-color: var(--btn-secondary-hover-bg);
    border-color: var(--btn-secondary-hover-border);
}
.b_pt {
    background-color: var(--btn-print-bg);
    color: var(--btn-print-text) !important; 
    border: 1px solid var(--btn-print-border);
}
.b_pt:hover {
    background-color: var(--btn-print-hover-bg);
    border-color: var(--btn-print-hover-border);
}
.b_pt:focus {
    outline: none;
    box-shadow: var(--btn-print-focus-shadow);
}
.b_gt {
    background-color: var(--btn-green-theme-bg);
    color: var(--btn-green-theme-text) !important;
    border-color: var(--btn-green-theme-border);
}
.b_gt:hover {
    background-color: var(--btn-green-theme-hover-bg);
}

/* Forms */
.fin, .fta, .fsl {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--text-on-primary-dark); 
    background-color: var(--background-light-grey); 
    background-clip: padding-box;
    border: 1px solid var(--border-grey);
    border-radius: 0.25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.fism { /* For smaller inputs like API key */
    padding: 0.375rem 0.625rem;
    font-size: 0.8rem;
}
.fin:focus, .fta:focus, .fsl:focus {
    border-color: var(--primary-purple);
    outline: 0;
    box-shadow: 0 0 0 0.2rem var(--light-purple-hover-bg);
}
.fta { min-height: 80px; }
.fin::placeholder, .fta::placeholder {
    color: var(--tertiary-grey);
    opacity: 1; 
}

/* Editable Divs Styling */
.ediv {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--text-on-primary-dark);
    background-color: var(--background-light-grey);
    border: 1px solid var(--border-grey);
    border-radius: 0.25rem;
    min-height: 40px; 
    cursor: text;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    box-sizing: border-box; 
}
.ediv:focus {
    border-color: var(--primary-purple);
    outline: 0;
    box-shadow: 0 0 0 0.2rem var(--light-purple-hover-bg);
}
.ediv[data-placeholder-active="true"] {
    color: var(--tertiary-grey);
}


/* Instruction Banner */
.ibn {
    background-color: rgba(102, 187, 106, 0.1);
    color: var(--accent-green-text);
    border: 1px solid var(--accent-green-border);
    border-left: 4px solid var(--btn-print-bg);
    padding: 1rem;
    border-radius: 0.375rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    line-height: 1.6;
}
.itgd {
    color: var(--accent-green-text) !important;
}


/* Planner Layout */
#cala {
    flex-shrink: 0; 
}


#calс {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 0.5rem; 
}
@media (min-width: 640px) { 
    #calс {
        flex-direction: row;
        align-items: center;
    }
}
#calg {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px; 
}
.dcel, .dhdr {
    padding: 0.2rem 0.1rem; 
    text-align: center;
    background-color: var(--secondary-dark-grey);
    border: 1px solid var(--tertiary-grey);
    border-radius: 0.125rem;
    font-size: 0.7rem;  
    color: var(--text-on-primary-dark);
}
.dhdr { font-weight: 500; }
.dcel { cursor: pointer; }
.dcel.cmon:hover { background-color: var(--tertiary-grey); }
.dcel.sel { background-color: var(--primary-purple); color: white; }
.dcel.tday { border-color: var(--accent-yellow); font-weight: bold; }
.dcel:not(.cmon) { color: var(--tertiary-grey); opacity: 0.6; }

/* Task & Achievement List */
ul { list-style: none; padding: 0; }
.titm, .aitm {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.125rem 0.5rem;
    border: 1px solid var(--border-grey);
    border-radius: 0.25rem;
    margin-bottom: 0.5rem;
    background-color: var(--background-light-grey); 
    transition: background-color 0.2s;
    user-select: none; 
}
.titm.tcmp {
    background-color: var(--task-complete-bg);
    border-color: var(--task-complete-border);
}
.titm.tcmp .tinp {
    text-decoration: line-through;
    color: var(--tertiary-grey);
}
.titm.drg { opacity: 0.5; background-color: var(--accent-yellow-hover-bg); }

.tinp {
    flex-grow: 2;
    border: none;
    padding: 0.25rem;
    font-size: 0.875rem;
    background-color: transparent;
    color: var(--text-on-primary-dark);
    width: 100%; 
    min-width: 0; 
}
.tinp:focus { outline: none; }
.tinp::placeholder {
    color: var(--tertiary-grey);
    font-style: italic;
}

.t_ac { display: flex; align-items: center; gap: 0.5rem; }
.lsct { display: flex; gap: 0.25rem; margin-left: 0.5rem; }

.lcrc {
    width: 1.25rem; 
    height: 1.25rem;
    border-radius: 50%; 
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 1px solid var(--border-grey);
    color: var(--text-on-primary-dark);
    font-size: 0.65rem; 
    line-height: 1;
    font-weight: 500;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.lcrc.sel { 
    background-color: var(--primary-purple); 
    color: white; 
    border-color: var(--primary-purple); 
}
.titm.tcmp .lcrc.sel {
    background-color: var(--task-complete-level-bg);
    color: var(--task-complete-level-text);
    border-color: var(--task-complete-level-bg);
}
.lcrc.lsbd {
    opacity: 0.4;
    pointer-events: none !important; 
    background-color: var(--tertiary-grey) !important;
    color: var(--text-on-primary-dark) !important;
    border-color: var(--secondary-dark-grey) !important;
}


.btac { 
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    line-height: 1;
    flex-shrink: 0;
}
.btdn { 
    background-color: var(--btn-done-bg);
    color: var(--btn-done-text);
    border-color: var(--btn-done-border);
}
.btdn:hover { background-color: var(--btn-done-hover-bg); }
.btun { 
    background-color: var(--btn-undo-bg);
    color: var(--btn-undo-text);
    border-color: var(--btn-undo-border);
}
.btun:hover { background-color: var(--btn-undo-hover-bg); }
.bdel {
    background: none; border: none; color: var(--danger-red); padding: 0.25rem;
    font-size: 1rem; 
    flex-shrink: 0;
}

/* Progress Bars */
.ptxt {
    color: var(--tertiary-grey);
    font-size: 0.75rem; 
    text-align: right; 
    margin-top: 0.25rem;
}
#dfwc {
    background-color: var(--wave-empty-bg);
    border-radius: 0.375rem;
    position: relative; 
}
#dfwc.fpls {
    animation: sglw 1s ease-out;
}
#dfwf {
    background-color: var(--wave-fill-color);
    background-image: linear-gradient(45deg, rgba(255,255,255,.1) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.1) 50%, rgba(255,255,255,.1) 75%, transparent 75%, transparent);
    background-size: 20px 20px;
    animation: wvan 2s linear infinite;
    border-radius: 0.375rem; 
}
#dfwc.mty #dfwf {
    animation: none;
    background-image: none;
}

@keyframes wvan {
    0% { background-position: 0 0; }
    100% { background-position: 40px 0; }
}
@keyframes sglw {
    0% { box-shadow: 0 0 0 0 rgba(149, 117, 205, 0.4); } 
    70% { box-shadow: 0 0 10px 5px rgba(149, 117, 205, 0); }
    100% { box-shadow: 0 0 0 0 rgba(149, 117, 205, 0); }
}
.lpc { width: 100%; }
.lpb {
    width: 100%;
    background-color: var(--border-grey);
    border-radius: 0.25rem;
    height: 0.5rem;
    overflow: hidden;
    margin-top: 0.25rem;
}
.lpbf {
    height: 100%;
    background-color: var(--primary-purple);
    border-radius: 0.25rem;
    transition: width 0.3s ease-in-out;
}

/* Brainstorm Progress Indicator */
#bpic {
    width: 3rem; 
    height: 3rem; 
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--border-grey); 
    background-image: conic-gradient(
        var(--task-complete-level-bg) var(--progress-angle, 0deg), 
        var(--border-grey) var(--progress-angle, 0deg) 360deg
    );
    transition: background-image 0.3s ease-in-out;
}
#bpic.acvd {
    background-image: none; 
    background-color: var(--task-complete-level-bg); 
}
#bpsa { 
    position: absolute;
    font-size: 1.5rem; 
    color: var(--task-complete-level-text); 
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}
#bpic.acvd #bpsa {
    opacity: 1;
}


/* Modals */
.modl {
    display: none; 
    position: fixed; 
    z-index: 1001; 
    left: 0; top: 0;
    width: 100%; height: 100%;
    overflow: auto; 
    background-color: rgba(0,0,0,0.7); 
    animation: fdin 0.3s;
}
.mcon {
    background-color: var(--secondary-dark-grey); 
    color: var(--text-on-primary-dark); 
    margin: 10% auto;
    padding: 1.25rem;
    border: 1px solid var(--tertiary-grey);
    border-radius: 0.375rem;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    animation: slin 0.3s;
}
.mhdr {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--tertiary-grey);
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
}
.mhdr h3 { font-size: 1.125rem; font-weight: 500; margin: 0; color: var(--text-on-primary-dark); }
.cbtn {
    color: var(--tertiary-grey);
    font-size: 1.5rem;
    font-weight: bold;
    background: none;
    border: none;
    cursor: pointer;
}
.cbtn:hover, .cbtn:focus { color: var(--text-on-primary-dark); }
.mbod ul { margin-top: 0.5rem; }
.mbod li {
    padding: 0.5rem;
    border-bottom: 1px solid var(--tertiary-grey); 
    cursor: pointer;
    transition: background-color 0.2s;
    color: var(--text-on-primary-dark);
}
.mbod li:hover { background-color: var(--primary-dark-grey); }
.mbod li:last-child { border-bottom: none; }
.tils h4 {
    font-size: 0.9rem; font-weight: 500; margin-top: 1rem; margin-bottom: 0.5rem;
    color: var(--text-on-primary-dark);
}

/* Search Results & Ask AI Modal Specifics */
#srm .mcon, #aara {
    max-width: 700px;
}
#src, #aans, 
#wsan, #wsan_a { /* Added alt */
    line-height: 1.6;
}
#src p, #aans p, 
#wsan p, #wsan_a p { /* Added alt */
    margin-bottom: 0.75rem; 
    color: var(--text-on-primary-dark);
}
#src h1, 
#src h2, 
#src h3, 
#src h4,
#aans h1, 
#aans h2, 
#aans h3, 
#aans h4,
#wsan h1, #wsan_a h1, /* Added alt */
#wsan h2, #wsan_a h2,
#wsan h3, #wsan_a h3,
#wsan h4, #wsan_a h4 {
    color: var(--primary-purple); 
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}
#src ul, 
#src ol,
#aans ul,
#aans ol,
#wsan ul, #wsan_a ul, /* Added alt */
#wsan ol, #wsan_a ol {
    list-style-position: inside;
    margin-left: 1rem;
    margin-bottom: 0.75rem;
}
#src li, #aans li,
#wsan li, #wsan_a li { /* Added alt */
    padding: 0.25rem 0;
    border-bottom: none; 
}
#src code, #aans code,
#wsan code, #wsan_a code { /* Added alt */
  background-color: var(--primary-dark-grey);
  color: var(--accent-yellow);
  padding: 0.1em 0.3em;
  border-radius: 3px;
}
#src pre, #aans pre,
#wsan pre, #wsan_a pre { /* Added alt */
  background-color: var(--primary-dark-grey);
  padding: 0.5rem;
  border-radius: 0.25rem;
  overflow-x: auto; 
}
#srl, #sre {
    color: var(--tertiary-grey);
}
#sre.apbn { 
    font-size: 0.875rem;
    color: var(--danger-red);
    padding: 0.75rem;
    margin-bottom: 1rem;
    border: 1px solid var(--danger-red);
    border-radius: 0.25rem;
    background-color: rgba(240, 98, 146, 0.1); 
}
#srs, #asrc,
#wsrc, #wsrc_a { /* Added alt */
    margin-top: 1rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-grey);
}
#srsl li, #asl li,
#wsl li, #wsla li { /* Added alt */
    margin-bottom: 0.25rem;
}
#srsl a, #asl a,
#wsl a, #wsla a { /* Added alt */
    color: var(--primary-purple);
    text-decoration: none;
    word-break: break-all;
}
#srsl a:hover, #asl a:hover,
#wsl a:hover, #wsla a:hover { /* Added alt */
    text-decoration: underline;
}

/* Increased font size for AI-generated answers for better readability */
#src, #gca, #wsan {
    font-size: 1.125rem; /* Equivalent to .tlg, approx. 1.3x increase from original */
    line-height: 1.65;
}

/* Toast Notifications */
#tcon {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 2000; 
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.tst {
    background-color: var(--secondary-dark-grey);
    color: var(--text-on-primary-dark);
    padding: 0.75rem 1.25rem;
    border-radius: 0.25rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    font-size: 0.875rem;
}
.tst.show { opacity: 1; transform: translateY(0); }
.tst.sux { background-color: var(--accent-green-bg); color: var(--accent-green-text); }
.tst.err { background-color: var(--danger-red); color: white; }
.tst.wrn { background-color: var(--accent-yellow); color: var(--primary-dark-grey); }
.tst.nfo { 
    background-color: var(--secondary-dark-grey);
    color: var(--text-on-primary-dark);
}

/* Rubbish Bin */
#rbin {
    background-color: var(--background-light-grey);
    color: var(--tertiary-grey);
    transition: background-color 0.3s, border-color 0.3s;
    border: 2px dashed var(--border-grey); 
}
#rbin.adz { 
    background-color: rgba(240, 98, 146, 0.1); 
    border-color: var(--danger-red);
}

/* AI Interaction Styles */
.apbn {
    font-size: 0.75rem;
    color: var(--danger-red);
    padding: 0.5rem;
    margin-bottom: 0.75rem;
    border: 1px solid var(--danger-red);
    border-radius: 0.25rem;
    background-color: rgba(240, 98, 146, 0.1); 
}
.aipop {
    position: absolute;
    z-index: 20;
    background-color: var(--secondary-dark-grey); 
    border: 1px solid var(--tertiary-grey);
    border-radius: 0.375rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    padding: 0.75rem;
    margin-top: 0.25rem;
    display: none; 
    width: 320px; 
    max-height: 288px; 
    overflow-y: auto;
}
.aipop.vis { display: block; }
#atsp p { 
    padding: 0.5rem;
    cursor: pointer;
    border-bottom: 1px solid var(--tertiary-grey);
    font-size: 0.875rem;
    color: var(--text-on-primary-dark);
}
#atsp p:hover { background-color: var(--primary-dark-grey); }
#atsp p:last-child { border-bottom: none; }

.aipop .fin { 
    background-color: var(--background-light-grey);
    color: var(--text-on-primary-dark);
    border-color: var(--border-grey);
}
.aipop .fin::placeholder { color: var(--tertiary-grey); }
.aipop .btn { 
    background-color: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
    border-color: var(--btn-secondary-border);
}
.aipop .btn:hover {
    background-color: var(--btn-secondary-hover-bg);
}
.aipop .b_pr { 
     background-color: var(--btn-primary-bg);
    color: var(--btn-primary-text);
}
.aipop .b_pr:hover {
    background-color: var(--btn-primary-hover-bg);
}


.alsc {
    position: relative; 
}
.albtn {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    background-color: var(--secondary-dark-grey);
    color: var(--text-on-primary-dark);
    border: 1px solid var(--tertiary-grey);
    border-radius: 0.25rem;
    cursor: pointer;
}
.albtn:hover { background-color: var(--tertiary-grey); }
.aldd {
    display: none; 
    position: absolute;
    right: 0;
    margin-top: 0.25rem;
    width: 160px;
    background-color: var(--secondary-dark-grey);
    border: 1px solid var(--tertiary-grey);
    border-radius: 0.25rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    padding: 0.25rem 0;
    z-index: 30; 
}
.aldd.vis { display: block; }
.aldd a {
    display: block;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    color: var(--text-on-primary-dark);
    text-decoration: none;
}
.aldd a:hover {
    background-color: var(--primary-dark-grey);
}
.aldd a.sel {
    background-color: var(--primary-purple);
    color: var(--text-on-purple);
}
.acim {
    font-size: 0.7rem;
    color: var(--tertiary-grey);
    margin-top: 0.25rem;
    text-align: right;
}

/* Bulk Selection Rectangle */
#srec {
    position: absolute;
    border: 1px dashed var(--primary-purple);
    background-color: rgba(149, 117, 205, 0.1); 
    display: none;
    pointer-events: none; 
    z-index: 9999;
}

body.bsa .titm,
body.bsa .aitm {
    cursor: default; 
}
body.bsa .titm .bscb,
body.bsa .aitm .bscb {
    display: inline-block !important; 
}

#batb { 
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--primary-dark-grey);
    padding: 0.75rem;
    border-radius: 0.375rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    z-index: 1050;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
#batb.hid {
    display: none;
}
#bssc {
    color: var(--text-on-primary-dark);
    font-size: 0.875rem;
}
#bsdb {
    background-color: var(--danger-red) !important; 
    color: white !important;
    border-color: var(--danger-red) !important;
}
#bsdb:hover {
    background-color: #d32f2f !important; 
}

/* Flexbox and Grid Fallbacks */
.flx { display: flex; }
.aic { align-items: center; }
.jbt { justify-content: space-between; }
.jcc { justify-content: center; }
.fcol { flex-direction: column; }
.fgrw { flex-grow: 1; }
.fsh0 { flex-shrink: 0; }
.sx1 > :not([hidden]) ~ :not([hidden]) { margin-left: 0.25rem; }
.sx2 > :not([hidden]) ~ :not([hidden]) { margin-left: 0.5rem; }

/* ====== APPENDED UTILITY CLASSES ====== */

/* Spacing */
.sy2 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.5rem; }
.gp2 { gap: 0.5rem; }
.gp3 { gap: 0.75rem; }
.gp4 { gap: 1rem; }
.gy2 { row-gap: 0.5rem; }
.p1 { padding: 0.25rem; }
.p2 { padding: 0.5rem; }
.p3 { padding: 0.75rem; }
.p4 { padding: 1rem; }
.px4 { padding-left: 1rem; padding-right: 1rem; }
.px6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py4 { padding-top: 1rem; padding-bottom: 1rem; }
.py8 { padding-top: 2rem; padding-bottom: 2rem; }
.py10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.pt4 { padding-top: 1rem; }
.pt6 { padding-top: 1.5rem; }
.pl4 { padding-left: 1rem; }
.ml1 { margin-left: 0.25rem; }
.ml2 { margin-left: 0.5rem; }
.mr1 { margin-right: 0.25rem; }
.mr2 { margin-right: 0.5rem; }
.mr4 { margin-right: 1rem; }
.mt1 { margin-top: 0.25rem; }
.mt2 { margin-top: 0.5rem; }
.mt3 { margin-top: 0.75rem; }
.mt4 { margin-top: 1rem; }
.mt6 { margin-top: 1.5rem; }
.mb1 { margin-bottom: 0.25rem; }
.mb2 { margin-bottom: 0.5rem; }
.mb3 { margin-bottom: 0.75rem; }
.mb4 { margin-bottom: 1rem; }
.mb6 { margin-bottom: 1.5rem; }
.mxa { margin-left: auto; margin-right: auto; }

/* Sizing */
.wfl { width: 100%; }
.h4 { height: 1rem; }
.w4 { width: 1rem; }
.h5 { height: 1.25rem; }
.w5 { width: 1.25rem; }
.w32 { width: 8rem; }
.w56 { width: 14rem; }
.hfl { height: 100%; }
.mw2x { max-width: 42rem; }
.mwn { max-width: none; }
.mh60 { max-height: 15rem; }
.mh48 { max-height: 12rem; }

/* Typography */
.txs { font-size: 0.75rem; line-height: 1rem; }
.tsm { font-size: 0.875rem; line-height: 1.25rem; }
.tbs { font-size: 1rem; line-height: 1.5rem; }
.tlg { font-size: 1.125rem; line-height: 1.75rem; }
.txl { font-size: 1.25rem; line-height: 1.75rem; }
.t2xl { font-size: 1.5rem; line-height: 2rem; }
.t3xl { font-size: 1.875rem; line-height: 2.25rem; }
.t5xl { font-size: 3rem; line-height: 1; }
.fwl { font-weight: 300; }
.fwm { font-weight: 500; }
.fws { font-weight: 600; }
.fwb { font-weight: 700; }
.txc { text-align: center; }
.txl { text-align: left; }
.txw { color: #fff; }
.tg3 { color: #d1d5db; }
.tg4 { color: var(--tertiary-grey); }
.tr4 { color: var(--danger-red); }
.ty3 { color: var(--accent-yellow); }

/* Layout */
.blk { display: block; }
.ibk { display: inline-block; }
.iflx { display: inline-flex; }
.grd { display: grid; }
.gc1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.gc2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gc3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hid { display: none !important; }

/* Flexbox */
.fwrp { flex-wrap: wrap; }
.jend { justify-content: flex-end; }

/* Positioning */
.rel { position: relative; }
.abs { position: absolute; }
.fix { position: fixed; }
.t0 { top: 0; }
.r0 { right: 0; }
.b4 { bottom: 1rem; }
.l1_2 { left: 50%; }

/* Borders & Shadows */
.bdr { border-width: 1px; }
.bdr2 { border-width: 2px; }
.bdrt { border-top-width: 1px; }
.bdrb { border-bottom-width: 1px; }
.bdsh { border-style: dashed; }
.bdrg6 { border-color: var(--tertiary-grey); }
.rnd { border-radius: 0.25rem; }
.rndm { border-radius: 0.375rem; }
.rndf { border-radius: 9999px; }
.shlg { box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -2px rgba(0,0,0,.05); }
.rng1 { box-shadow: 0 0 0 1px var(--tw-ring-color, currentColor); }
.rngb { --tw-ring-color: #000; }
.rngo5 { --tw-ring-opacity: 0.05; box-shadow: 0 0 0 1px rgba(0,0,0, var(--tw-ring-opacity)); }

/* Transforms */
.xfm {
  transform: translateX(var(--tw-translate-x, 0)) translateY(var(--tw-translate-y, 0)) rotate(var(--tw-rotate, 0)) skewX(var(--tw-skew-x, 0)) skewY(var(--tw-skew-y, 0)) scaleX(var(--tw-scale-x, 1)) scaleY(var(--tw-scale-y, 1));
}
.t_x50 { --tw-translate-x: -50%; transform: var(--tw-transform); }

/* Z-Index */
.z10 { z-index: 10; }
.z20 { z-index: 20; }
.z30 { z-index: 30; }
.z50 { z-index: 50; }
.z1k1 { z-index: 1010; }

/* Miscellaneous */
.cp { cursor: pointer; }
.cna { cursor: not-allowed; }
.sro {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.seln { user-select: none; }
.ofh { overflow: hidden; }
.ofya { overflow-y: auto; }
.ofxa { overflow-x: auto; }
.wsnw { white-space: nowrap; }
.op50 { opacity: 0.5; }

/* Header Specific Styles */
#hng {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem 0;
}
.hngi {
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    color: var(--text-on-primary-dark);
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    transition: background-color 0.2s, color 0.2s;
    text-decoration: none;
    white-space: nowrap;
}
.hngi:hover {
    background-color: var(--primary-dark-grey);
    color: var(--primary-purple);
}

.mni {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--border-grey);
    border-radius: 0.25rem;
    background-color: var(--secondary-dark-grey);
    color: var(--text-on-primary-dark);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.mni:hover {
    background-color: var(--primary-dark-grey);
    border-color: var(--primary-purple);
    color: var(--primary-purple);
}

/* Prose for AI content */
.prs {
    color: var(--text-on-primary-dark);
    max-width: 65ch;
    font-size: 1rem;
    line-height: 1.75;
}
.prsm { font-size: 0.875rem; line-height: 1.625; }
.prs h1, .prs h2, .prs h3, .prs h4, .prs h5, .prs h6 {
    color: var(--primary-purple);
    font-weight: 600;
    margin-top: 1.25em;
    margin-bottom: 0.625em;
}
.prs p { margin-top: 0.75em; margin-bottom: 0.75em; }
.prs ul, .prs ol { margin-top: 1em; margin-bottom: 1em; padding-left: 1.5em; }
.prs ul { list-style-type: disc; }
.prs ol { list-style-type: decimal; }
.prs li { margin-top: 0.25em; margin-bottom: 0.25em; }
.prs strong { font-weight: 600; color: var(--text-on-primary-dark); }
.prs a { color: var(--primary-purple); text-decoration: underline; }
.prs code { 
  background-color: var(--primary-dark-grey);
  color: var(--accent-yellow);
  padding: 0.1em 0.3em;
  border-radius: 3px;
  font-family: monospace;
}
.prs pre {
  background-color: var(--primary-dark-grey);
  padding: 0.75rem;
  border-radius: 0.375rem;
  overflow-x: auto;
  font-family: monospace;
}
.prs pre code {
    padding: 0;
    background-color: transparent;
}


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

/* Print Styles */
@media print {
    body {
        background-color: #fff !important;
        color: #000 !important;
    }
    header, footer, #batb, #tcon, #usta, #strg, #stra, #ctcs, #hero, #ppb2_wrapper, .site-footer-main, .understanding-risks, .share-earn-section, .internal-links-section, nav[aria-label="breadcrumb"] {
        display: none !important;
    }
    main {
        padding: 0;
    }
    .crd {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
        background-color: #fff !important;
        color: #000 !important;
        page-break-inside: avoid;
    }
    .crd * {
        color: #000 !important;
    }
    .btn, .fsl, .h_ic {
        display: none !important;
    }
    .fin, .fta, .ediv {
        border: 1px solid #ccc !important;
        background-color: #f9f9f9 !important;
        color: #000 !important;
    }

    /* Fix for Daily Focus and other textareas wrapping */
    .fta {
        white-space: pre-wrap !important;
        word-break: break-word !important;
        height: auto !important;
        overflow: visible !important;
        background-color: #fff !important;
    }
    
    .titm {
        page-break-inside: avoid;
    }
    .titm .t_ac, .titm .lsct { display: none !important; }
    .tcmp .tinp {
        text-decoration: line-through;
        color: #667 !important;
    }
    .aitm .bdel { display: none !important; }

    /* Custom print rules to clean up planner view */
    .crd:has(#aasc), /* Hides the container card for AI/Timer */
    #aasc, #foco, /* Explicitly hide AI/Timer to fix "squares" */
    #aboc, #abp, #ab_e, /* Hide AI controls in brainstorm */
    #tlc > div:first-of-type, /* Hides "TASK LIST" header container */
    #tlc > .flx.aic.sx2, /* Hides the task input row */
    #abg, /* Hides AI buttons for tasks */
    #trci, /* Hides instruction banner in task list */
    #tpc /* Hides task progress bar */ {
        display: none !important;
    }

    #tlc {
        padding-top: 0 !important;
        border: none !important;
    }
}


/* Responsive Styles */
@media (min-width: 640px) { /* sm */
    .sm_py16 { padding-top: 4rem; padding-bottom: 4rem; }
    .sm_tbs { font-size: 1rem; line-height: 1.5rem; }
    .sm_sx3 > :not([hidden]) ~ :not([hidden]) { margin-left: 0.75rem; }
    .sm_frw { flex-direction: row; }
    .sm_mt0 { margin-top: 0; }
    .sm_wa { width: auto; }
    .sm_js { justify-content: flex-start; }
}

@media (min-width: 768px) { /* md */
    .md_gc2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) { /* lg */
    .lg_gc3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lg_frw { flex-direction: row; }
    .lg_w13 { width: 33.333333%; }
    .lg_w23 { width: 66.666667%; }
    .lg_mwmd { max-width: 28rem; }
}

@media (min-width: 1280px) { /* xl */
    .xl_mwsm { max-width: 24rem; }
}

/* Footer logo specifics */
.flc {
    display: flex;
    justify-content: center;
}

.flog {
    height: 40px;
    width: auto;
}

.titm .asi {
    display: none;
    margin-right: 0.5em;
    color: var(--accent-yellow);
    font-size: 0.9em;
}
.titm[data-ai-source="list"] .asi {
    display: inline;
}
.ali {
    font-size: 0.8em;
    color: var(--tertiary-grey);
    margin-left: 0.5em;
}
#alsm .mbod ul li {
    padding: 0.75rem;
    border-bottom: 1px solid var(--tertiary-grey);
    cursor: pointer;
    transition: background-color: 0.2s;
}
#alsm .mbod ul li:hover {
    background-color: var(--primary-dark-grey);
}
#alsm .mbod ul li:last-child {
    border-bottom: none;
}
.h_ic {
    display: inline-block;
    width: 1.25rem; /* Tailwind w-5 */
    height: 1.25rem; /* Tailwind h-5 */
    line-height: 1.25rem;
    text-align: center;
    border: 1px solid var(--tertiary-grey);
    color: var(--tertiary-grey);
    background-color: var(--background-light-grey);
    border-radius: 50%;
    font-size: 0.875rem; /* Tailwind text-sm */
    font-weight: bold;
    cursor: pointer;
    margin-left: 0.5rem; /* Tailwind ml-2 */
    transition: background-color 0.2s, color 0.2s;
}
.h_ic:hover {
    background-color: var(--tertiary-grey);
    color: var(--text-on-primary-dark);
}
.emc p {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}
.emc ul {
    list-style-type: disc;
    margin-left: 1.5rem;
    margin-bottom: 0.75rem;
}
.emc li {
    margin-bottom: 0.25rem;
}
.itgd {
    color: var(--accent-green-text) !important; /* Ensure override */
}
 #aimg {
    display: block;
    font-size: 0.75rem; 
    color: var(--danger-red);
    background-color: rgba(240, 98, 146, 0.1); 
    border: 1px solid var(--danger-red);
    padding: 0.5rem; 
    border-radius: 0.25rem; 
    margin-top: 0.25rem; 
    text-align: left;
    line-height: 1.4;
}
#aimg strong {
    color: var(--text-on-primary-dark);
}
#aimg ul { 
    list-style-type: disc;
    margin-left: 1.25rem; 
    margin-top: 0.25rem; 
    padding-left: 0.5rem; 
}
#aimg li { 
    margin-bottom: 0.125rem; 
}
#asl li a, #srsl li a,
#wsl li a, #wsla li a { 
    word-break: break-all;
}

.sbtn {
    background: none;
    border: 1px solid var(--tertiary-grey);
    color: var(--tertiary-grey);
    padding: 0.375rem;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.25rem; /* Adjust icon size */
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, color 0.2s;
}
.sbtn:hover {
    background-color: var(--tertiary-grey);
    color: var(--text-on-primary-dark);
}

/* Language Selector Dropdown Styles */
#lsc .btn {
    padding: 0.375rem 0.75rem; 
}
#ldm {
    background-color: var(--secondary-dark-grey);
    border: 1px solid var(--tertiary-grey);
    z-index: 1010; 
}
#ldm a {
    color: var(--text-on-primary-dark);
}
#ldm a:hover {
    background-color: var(--primary-dark-grey);
    color: var(--primary-purple);
}
.ftlr {
    min-height: 80px; 
}
.fitr {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

/* New Sections Styles */
.understanding-risks {
    background-color: var(--secondary-dark-grey);
    color: var(--text-on-primary-dark);
    padding: 2rem 1rem;
    margin: 1.5rem auto;
    max-width: 900px;
    border-radius: 0.5rem;
    border: 1px solid var(--border-grey);
}
.share-earn-section, .internal-links-section, .contact-section {
    background-color: transparent;
    color: var(--text-on-primary-dark);
    padding: 2.5rem 1rem;
    margin: 0 auto;
    max-width: 900px;
    border-radius: 0;
    border: none;
    border-top: 1px solid var(--border-grey);
}
.understanding-risks h2, .share-earn-heading, .internal-links-heading, .contact-heading {
    font-size: 1.5rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 1rem;
}
.share-earn-heading {
    color: var(--primary-purple);
}
.internal-links-heading {
    color: var(--btn-print-bg);
}
.contact-heading {
    color: var(--accent-yellow);
}
.understanding-risks h3 {
    color: var(--accent-yellow);
    font-size: 1.2rem;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--tertiary-grey);
    padding-bottom: 0.25rem;
}
.understanding-risks ul {
    list-style-type: disc;
    padding-left: 1.5rem;
    line-height: 1.7;
}
.understanding-risks li {
    margin-bottom: 0.5rem;
}
.understanding-risks strong {
    color: var(--accent-yellow-hover);
    font-weight: 600;
}
.share-earn-subheading, .contact-subheading {
    text-align: center;
    color: var(--tertiary-grey);
    margin-bottom: 1.5rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}
.share-buttons-container {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
.share-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.2rem;
    border-radius: 0.25rem;
    text-decoration: none;
    font-weight: 500;
    color: #fff;
    transition: opacity 0.2s;
}
.share-btn svg {
    vertical-align: middle;
}
.share-btn:hover {
    opacity: 0.85;
}
.share-btn.facebook { background-color: var(--primary-purple); }
.share-btn.telegram { background-color: var(--primary-purple); }
.referral-container {
    text-align: center;
}
.referral-container .btn {
    background-color: var(--btn-print-bg);
    color: var(--btn-print-text);
    border: 1px solid var(--btn-print-border);
}
.referral-container .btn:hover {
    background-color: var(--btn-print-hover-bg);
    border-color: var(--btn-print-hover-border);
}
#referral-link-wrapper {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}
#referral-link-wrapper.hidden {
    display: none;
}
#referral-link-input {
    flex-grow: 1;
    background-color: var(--background-light-grey);
    border: 1px solid var(--border-grey);
    color: var(--text-on-primary-dark);
    padding: 0.5rem;
    border-radius: 0.25rem;
}
#btn-copy-referral {
    background-color: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
    border: 1px solid var(--btn-secondary-border);
}
#btn-copy-referral:hover {
    background-color: var(--btn-secondary-hover-bg);
}
#referral-feedback {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: var(--accent-green-text);
    height: 1em;
    transition: opacity 0.3s;
}
.site-nav {
    display: flex;
    justify-content: center;
}
.nav-links-relocated {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    padding: 0;
    list-style: none;
}
.nav-links-relocated li a, .nav-links-relocated li span {
    display: inline-block;
    background-color: var(--btn-green-theme-bg);
    color: var(--btn-green-theme-text);
    padding: 0.6rem 1.2rem;
    border-radius: 9999px;
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.2s;
    border: 1px solid transparent;
}
.nav-links-relocated li a:hover, .nav-links-relocated li span:hover {
    background-color: var(--btn-green-theme-hover-bg);
    text-decoration: none;
}
.contact-card {
    background-color: var(--primary-dark-grey);
    padding: 1.5rem;
    border-radius: 0.375rem;
    max-width: 400px;
    margin: 0 auto;
}
.contact-card h3 {
    margin-top: 0;
    text-align: center;
    color: var(--text-on-primary-dark);
}
.contact-link {
    margin-bottom: 0.5rem;
}
.contact-link a {
    color: var(--primary-purple);
}
.site-footer-main {
    background-color: transparent;
    border-top: none;
    padding: 2rem 1rem;
    color: var(--tertiary-grey);
}
.footer-links {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
    list-style: none;
    padding: 0;
}
.footer-links a, .footer-links span {
    color: var(--tertiary-grey);
    text-decoration: none;
    font-size: 0.875rem;
}
.footer-links a:hover, .footer-links span:hover {
    color: var(--text-on-primary-dark);
}
.site-search-container {
    max-width: 600px;
    margin: 0 auto 2rem auto;
}
.site-search-form {
    display: flex;
    width: 100%;
}
.site-search-input {
    flex-grow: 1;
    background-color: var(--secondary-dark-grey);
    border: 1px solid var(--border-grey);
    color: var(--text-on-primary-dark);
    padding: 0.6rem 1rem;
    border-radius: 1.5rem 0 0 1.5rem;
    font-size: 0.9rem;
    border-right: none;
}
.site-search-input:focus {
    outline: none;
    border-color: var(--primary-purple);
    box-shadow: 0 0 0 2px var(--light-purple-hover-bg);
}
.site-search-button {
    padding: 0 1.2rem;
    background-color: var(--secondary-dark-grey);
    border: 1px solid var(--border-grey);
    color: var(--primary-purple);
    border-radius: 0 1.5rem 1.5rem 0;
    cursor: pointer;
    border-left: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.site-search-button:hover {
    background-color: var(--tertiary-grey);
    color: var(--text-on-primary-dark);
}
.footer-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1.5rem;
    max-width: 1200px;
    margin: 2rem auto 0;
    padding: 2rem 1rem;
    border-top: 1px solid var(--border-grey);
    text-align: left;
}
.footer-column {
    font-size: 0.8rem;
    line-height: 1.6;
    color: var(--tertiary-grey);
}
.footer-column strong {
    color: var(--text-on-primary-dark);
    font-weight: 500;
}
.footer-column-icon {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}
.footer-column-icon .coin-icon {
    font-size: 1.5rem;
    line-height: 1;
    margin-top: 0.1rem;
    color: var(--coin-gold);
}
@media (min-width: 640px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 1024px) {
    .footer-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}


/* Breadcrumbs */
.breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  list-style: none;
  font-size: 0.875rem;
}
.breadcrumb-item {
  display: flex;
  align-items: center;
}
.breadcrumb-item a {
  color: var(--primary-purple);
  text-decoration: none;
}
.breadcrumb-item a:hover {
  text-decoration: underline;
}
.breadcrumb-item + .breadcrumb-item::before {
  content: '/';
  display: inline-block;
  padding: 0 0.5rem;
  color: var(--tertiary-grey);
}
.breadcrumb-item.active {
  color: var(--tertiary-grey);
}

/* 3D Animation Styles */
.mode-3d #pcfc {
    perspective: 1500px;
    transition: perspective 0.5s ease-in-out;
}

.mode-3d #plcl .crd,
.mode-3d #prcl .crd {
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease;
    transform-style: preserve-3d;
}

.mode-3d #tlc { transform: rotateY(-15deg) rotateX(5deg) translateZ(50px) translate(var(--translateX, 0), var(--translateY, 0)); }
.mode-3d #btcd { transform: rotateY(-10deg) rotateX(10deg) translateZ(30px) translateX(-20px) translate(var(--translateX, 0), var(--translateY, 0)); }
.mode-3d #ntcd { transform: rotateY(10deg) rotateX(10deg) translateZ(30px) translateX(20px) translate(var(--translateX, 0), var(--translateY, 0)); }
.mode-3d #pcfc > div > .crd:has(#aasc) { transform: rotateY(-5deg) rotateX(-5deg) translateZ(20px) translate(var(--translateX, 0), var(--translateY, 0)); } /* AI/Timer Card */
.mode-3d #cala { transform: rotateY(20deg) rotateX(10deg) translateZ(80px) translate(var(--translateX, 0), var(--translateY, 0)); }
.mode-3d #dfoc { transform: rotateY(15deg) rotateX(5deg) translateZ(40px) translate(var(--translateX, 0), var(--translateY, 0)); }
.mode-3d #dboc { transform: rotateY(15deg) rotateX(-5deg) translateZ(20px) translate(var(--translateX, 0), var(--translateY, 0)); }
.mode-3d #accd { transform: rotateY(10deg) rotateX(-10deg) translateZ(0px) translate(var(--translateX, 0), var(--translateY, 0)); }
.mode-3d #rbcd { opacity: 0.5; transform: translateZ(-50px) translate(var(--translateX, 0), var(--translateY, 0)); }

.mode-3d .crd {
    animation: pulse-glow 3s infinite alternate ease-in-out;
}

.draggable-card {
    cursor: grab;
    position: relative; /* Needed for z-index and dragging */
    z-index: 100;
}

.draggable-card.dragging {
    cursor: grabbing;
    z-index: 1000;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.55);
    animation: none; /* Stop pulsing while dragging */
}

@keyframes pulse-glow {
    0% {
        box-shadow: 0 1px 2px 0 rgba(0,0,0,.2), 0 1px 3px 1px rgba(0,0,0,.15), 0 0 5px rgba(149, 117, 205, 0.2);
    }
    100% {
        box-shadow: 0 4px 6px -1px rgba(0,0,0,.25), 0 2px 4px -1px rgba(0,0,0,.2), 0 0 15px rgba(149, 117, 205, 0.5);
    }
}