/* ==========================================================
   PERIOD BESTIE
   STYLE.CSS
   PART 1
========================================================== */

:root{

--primary:#ff4f87;
--primary-dark:#ff2d72;
--secondary:#8b5cf6;
--accent:#ffb7d5;

--background:#fff6fb;

--card:#ffffff;

--text:#2d2d2d;

--gray:#777;

--success:#30d158;

--warning:#ffcc00;

--danger:#ff3b30;

--period:#ff4f87;

--fertile:#33cc66;

--ovulation:#4b7cff;

--radius:20px;

--shadow:0 15px 40px rgba(0,0,0,.08);

--transition:.3s;

}

*{

margin:0;

padding:0;

box-sizing:border-box;

font-family:Poppins,sans-serif;

}

body{

background:linear-gradient(135deg,#fff6fb,#ffe7f2,#f8f1ff);

color:var(--text);

min-height:100vh;

overflow-x:hidden;

}

a{

text-decoration:none;

color:inherit;

}

button{

cursor:pointer;

border:none;

outline:none;

transition:.3s;

}

input,textarea,select{

outline:none;

border:none;

font-size:15px;

font-family:Poppins;

}

.app{

display:flex;

min-height:100vh;

}

/* ==========================================================
SIDEBAR
========================================================== */

.sidebar{

width:260px;

background:rgba(255,255,255,.55);

backdrop-filter:blur(20px);

padding:30px;

box-shadow:var(--shadow);

display:flex;

flex-direction:column;

justify-content:flex-start;

gap:30px;

}

.sidebar h2{

font-size:26px;

color:var(--primary);

font-weight:700;

}

.sidebar .logo{

display:flex;

align-items:center;

gap:12px;

font-size:30px;

}

.sidebar .logo h2{

font-size:22px;

}

.sidebar ul{

list-style:none;

display:flex;

flex-direction:column;

gap:10px;

}

.sidebar li{

padding:15px;

border-radius:15px;

transition:.3s;

cursor:pointer;

font-weight:500;

}

.sidebar li:hover{

background:#ffe4ef;

}

.sidebar li.active{

background:linear-gradient(135deg,#ff4f87,#ff77a7);

color:white;

}

.sidebar i{

margin-right:10px;

}

/* ==========================================================
MAIN
========================================================== */

.main{

flex:1;

padding:35px;

}

.main h1{

font-size:34px;

font-weight:700;

margin-bottom:5px;

}

.main p{

color:gray;

}

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

.calendar-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:30px;

}

.calendar-header button{

padding:12px 28px;

background:linear-gradient(135deg,#ff4f87,#ff77a7);

color:white;

border-radius:14px;

font-weight:600;

box-shadow:0 10px 25px rgba(255,79,135,.25);

}

.calendar-header button:hover{

transform:translateY(-2px);

}

/* ==========================================================
CALENDAR NAVIGATION
========================================================== */

.calendar-nav{

display:flex;

justify-content:center;

align-items:center;

gap:25px;

margin-bottom:25px;

}

.calendar-nav button{

width:48px;

height:48px;

border-radius:50%;

background:white;

box-shadow:var(--shadow);

font-size:18px;

}

.calendar-nav h2{

font-size:28px;

color:var(--primary);

min-width:250px;

text-align:center;

}

/* ==========================================================
CALENDAR GRID
========================================================== */

.calendar-grid{

display:grid;

grid-template-columns:repeat(7,1fr);

gap:12px;

background:white;

padding:25px;

border-radius:25px;

box-shadow:var(--shadow);

}

.calendar-grid > *{

min-width:0;

}

.weekday{

font-weight:700;

text-align:center;

padding:12px;

color:var(--primary);

}

.day{

height:70px;

border-radius:18px;

display:flex;

justify-content:center;

align-items:center;

background:#fff;

cursor:pointer;

transition:.25s;

font-weight:600;

border:1px solid #f2f2f2;

}

.day:hover{

background:#ffe4ef;

transform:translateY(-4px);

}

.empty{

height:70px;

}

.selected{

outline:3px solid var(--secondary);

}

.today{

border:2px solid var(--primary);

}

.period{

background:#ff4f87!important;

color:white;

}

.fertile{

background:#33cc66!important;

color:white;

}

.ovulation{

background:#4b7cff!important;

color:white;

}

.period-predicted{

background:rgba(255,79,135,.28)!important;

color:var(--text);

border:1px dashed var(--period);

}

.day.has-log::after{

content:"";

position:absolute;

bottom:6px;

right:6px;

width:6px;

height:6px;

border-radius:50%;

background:var(--secondary);

}

/* ==========================================================
LEGEND
========================================================== */

.legend{

display:flex;

gap:25px;

margin-top:30px;

margin-bottom:30px;

flex-wrap:wrap;

}

.legend div{

display:flex;

align-items:center;

gap:8px;

font-weight:500;

}

.dot{

width:18px;

height:18px;

border-radius:50%;

display:inline-block;

}

.dot.period{

background:#ff4f87;

}

.dot.fertile{

background:#33cc66;

}

.dot.ovulation{

background:#4b7cff;

}

.dot.today{

border:2px solid #ff4f87;

background:white;

}
/* ==========================================================
   DAY DETAILS CARD
========================================================== */

.day-card{

margin-top:35px;

background:rgba(255,255,255,.75);

backdrop-filter:blur(20px);

border-radius:25px;

padding:30px;

box-shadow:0 20px 40px rgba(0,0,0,.08);

display:flex;

flex-direction:column;

gap:18px;

}

.day-card h2{

color:var(--primary);

font-size:28px;

margin-bottom:10px;

}

.day-card label{

font-weight:600;

color:#555;

}

.day-card textarea,

.day-card select,

.day-card input{

width:100%;

padding:14px 18px;

border-radius:14px;

background:#fafafa;

border:1px solid #ececec;

transition:.3s;

font-size:15px;

}

.day-card textarea{

resize:vertical;

min-height:100px;

}

.day-card textarea:focus,

.day-card select:focus,

.day-card input:focus{

border-color:var(--primary);

box-shadow:0 0 0 4px rgba(255,79,135,.12);

}

/* ==========================================================
BUTTON GROUP
========================================================== */

.buttons{

display:flex;

gap:15px;

margin-top:10px;

flex-wrap:wrap;

}

.calendar-action-buttons{

margin-top:24px;

justify-content:center;

}

.buttons button{

padding:14px 26px;

border-radius:15px;

font-size:15px;

font-weight:600;

transition:.3s;

}

#saveDay{

background:linear-gradient(135deg,#ff4f87,#ff82b0);

color:white;

box-shadow:0 10px 25px rgba(255,79,135,.25);

}

#deleteDay{

background:#f4f4f4;

color:#555;

}

.buttons button:hover{

transform:translateY(-3px);

}

/* BS Date Input Section */

.bs-date-input-section{

background:linear-gradient(135deg,rgba(255,79,135,.07),rgba(255,130,176,.07));

border:1.5px solid rgba(255,79,135,.2);

border-radius:14px;

padding:14px 16px;

margin-bottom:14px;

}

.bs-date-input-section label{

font-weight:600;

color:#ff4f87;

font-size:13px;

display:block;

margin-bottom:10px;

}

.bs-date-row{

display:flex;

gap:8px;

margin-bottom:10px;

}

.bs-date-row input[type="number"]{

flex:1;

padding:9px 10px;

border-radius:10px;

border:1.5px solid #f0c0d0;

font-size:14px;

text-align:center;

}

.bs-date-row select{

flex:2;

padding:9px 10px;

border-radius:10px;

border:1.5px solid #f0c0d0;

font-size:13px;

}

.btn-mark-date{

width:100%;

padding:11px;

border-radius:12px;

background:linear-gradient(135deg,#ff4f87,#ff82b0);

color:white;

font-weight:600;

font-size:14px;

border:none;

cursor:pointer;

transition:.3s;

}

.btn-mark-date:hover{

transform:translateY(-2px);

box-shadow:0 8px 20px rgba(255,79,135,.3);

}

.day-card-divider{

border:none;

border-top:1.5px solid #f5e0e8;

margin:14px 0;

}

/* ==========================================================
DASHBOARD CARDS
========================================================== */

.cards{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(230px,1fr));

gap:22px;

margin-top:25px;

margin-bottom:35px;

}

.card{

background:rgba(255,255,255,.75);

backdrop-filter:blur(20px);

padding:28px;

border-radius:25px;

box-shadow:0 20px 40px rgba(0,0,0,.08);

transition:.3s;

position:relative;

overflow:hidden;

}

.card::before{

content:"";

position:absolute;

width:180px;

height:180px;

background:rgba(255,255,255,.18);

border-radius:50%;

top:-80px;

right:-80px;

}

.card:hover{

transform:translateY(-6px);

}

.card h3{

font-size:16px;

font-weight:600;

color:#666;

margin-bottom:12px;

}

.card h1{

font-size:42px;

color:var(--primary);

margin-bottom:10px;

line-height:1.2;

word-break:break-word;

}

.card.card-fertile h1,
.card.card-ovulation h1{

font-size:22px;

}

.card p{

font-size:14px;

color:#888;

}

/* ==========================================================
CARD COLORS
========================================================== */

.card-period{

border-left:6px solid var(--period);

background:linear-gradient(135deg, rgba(255,79,135,.10), rgba(255,255,255,.75));

}

.card-period h1{

color:var(--period);

}

.card-fertile{

border-left:6px solid var(--fertile);

background:linear-gradient(135deg, rgba(51,204,102,.10), rgba(255,255,255,.75));

}

.card-fertile h1{

color:#1f9e4d;

}

.card-ovulation{

border-left:6px solid var(--ovulation);

background:linear-gradient(135deg, rgba(75,124,255,.10), rgba(255,255,255,.75));

}

.card-ovulation h1{

color:var(--ovulation);

}

.card-cycle{

border-left:6px solid var(--secondary);

background:linear-gradient(135deg, rgba(139,92,246,.10), rgba(255,255,255,.75));

}

.card-cycle h1{

color:var(--secondary);

}

body.dark .card-period,
body.dark .card-fertile,
body.dark .card-ovulation,
body.dark .card-cycle{

background:#232323;

}

/* ==========================================================
QUICK ACTIONS
========================================================== */

.quick-actions{

margin-top:20px;

margin-bottom:35px;

}

.quick-actions h2{

margin-bottom:20px;

font-size:28px;

}

.action-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(180px,1fr));

gap:18px;

}

.action-grid button{

padding:18px;

border-radius:18px;

background:white;

box-shadow:0 15px 35px rgba(0,0,0,.08);

font-size:15px;

font-weight:600;

transition:.3s;

}

.action-grid button:hover{

background:linear-gradient(135deg,#ff4f87,#ff82b0);

color:white;

transform:translateY(-4px);

}

/* ==========================================================
SUMMARY SECTION
========================================================== */

.summary{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

gap:25px;

margin-top:30px;

}

.summary-card{

background:white;

padding:28px;

border-radius:22px;

box-shadow:0 15px 35px rgba(0,0,0,.08);

}

.summary-card h2{

margin-bottom:12px;

color:var(--primary);

}

.summary-card p{

line-height:1.8;

color:#666;

}

.moods{

display:flex;

gap:15px;

font-size:30px;

margin-top:15px;

flex-wrap:wrap;

}

.moods span{

cursor:pointer;

transition:.3s;

}

.moods span:hover{

transform:scale(1.3);

}

.moods span.mood-selected{

transform:scale(1.35);

filter:drop-shadow(0 0 8px rgba(255,79,135,.6));

}

/* ==========================================================
SCROLLBAR
========================================================== */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#ffeef5;

}

::-webkit-scrollbar-thumb{

background:#ff82b0;

border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

background:#ff4f87;

}

/* ==========================================================
ANIMATIONS
========================================================== */

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(25px);

}

to{

opacity:1;

transform:translateY(0);

}

}

.card,

.day-card,

.calendar-grid,

.summary-card{

animation:fadeUp .6s ease;

}
/* ==========================================================
   PERIOD BESTIE
   STYLE.CSS
   PART 3
   Responsive + Dark Mode + Glass UI
========================================================== */

/* Floating Background */

body::before{
content:"";
position:fixed;
width:600px;
height:600px;
background:linear-gradient(135deg,#ff4f87,#ffb7d5);
border-radius:50%;
top:-250px;
right:-250px;
opacity:.18;
filter:blur(80px);
z-index:-2;
animation:float1 12s ease-in-out infinite;
}

body::after{
content:"";
position:fixed;
width:500px;
height:500px;
background:linear-gradient(135deg,#8b5cf6,#b197fc);
border-radius:50%;
left:-220px;
bottom:-220px;
opacity:.15;
filter:blur(80px);
z-index:-2;
animation:float2 14s ease-in-out infinite;
}

@keyframes float1{

0%{transform:translateY(0);}
50%{transform:translateY(40px);}
100%{transform:translateY(0);}

}

@keyframes float2{

0%{transform:translateX(0);}
50%{transform:translateX(50px);}
100%{transform:translateX(0);}

}

/* Glass Effect */

.glass{

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

backdrop-filter:blur(18px);

border:1px solid rgba(255,255,255,.3);

}

/* Smooth */

html{

scroll-behavior:smooth;

}

/* Card Hover */

.card:hover,
.summary-card:hover,
.day-card:hover{

transform:translateY(-8px);

box-shadow:0 30px 60px rgba(0,0,0,.12);

}

/* Calendar Hover */

.day{

position:relative;

overflow:hidden;

}

.day::before{

content:"";

position:absolute;

width:0;

height:0;

background:rgba(255,79,135,.12);

border-radius:50%;

transition:.4s;

}

.day:hover::before{

width:120px;

height:120px;

}

/* Selected Day */

.day.selected{

background:linear-gradient(135deg,#ff4f87,#ff82b0);

color:white;

border:none;

}

/* Inputs */

input,
textarea,
select{

transition:.3s;

}

input:hover,
textarea:hover,
select:hover{

border-color:#ff4f87;

}

/* Mobile Menu */

.mobile-nav{

display:none;

}

/* ==========================
Dark Theme
========================== */

body.dark{

background:#141414;

color:white;

}

body.dark .sidebar{

background:#1f1f1f;

}

body.dark .card,

body.dark .summary-card,

body.dark .day-card,

body.dark .calendar-grid{

background:#232323;

color:white;

}

body.dark textarea,

body.dark input,

body.dark select{

background:#2e2e2e;

color:white;

border:1px solid #444;

}

body.dark .day{

background:#2d2d2d;

color:white;

border:1px solid #444;

}

body.dark .weekday{

color:#ff82b0;

}

body.dark .calendar-nav button{

background:#2d2d2d;

color:white;

}

body.dark .action-grid button{

background:#2d2d2d;

color:white;

}

/* ==========================
Purple Theme
========================== */

body[data-theme="purple"]{

background:linear-gradient(135deg,#f5f3ff,#ede9fe,#f8f1ff);

}

body[data-theme="purple"] .sidebar li.active{

background:linear-gradient(135deg,#8b5cf6,#a78bfa);

}

body[data-theme="purple"] .calendar-header button,

body[data-theme="purple"] #saveDay,

body[data-theme="purple"] .action-grid button:hover{

background:linear-gradient(135deg,#8b5cf6,#a78bfa);

box-shadow:0 10px 25px rgba(139,92,246,.25);

}

body[data-theme="purple"] .sidebar h2,

body[data-theme="purple"] .calendar-nav h2,

body[data-theme="purple"] .card h1,

body[data-theme="purple"] .summary-card h2{

color:var(--secondary);

}

body[data-theme="purple"] .today{

border-color:var(--secondary);

}

/* ==========================
Responsive
========================== */

@media(max-width:1100px){

.sidebar{

width:210px;

padding:20px;

}

.main{

padding:20px;

}

.cards{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:900px){

.app{

flex-direction:column;

}

.sidebar{

width:100%;

padding:20px;

}

.sidebar ul{

display:flex;

flex-direction:row;

overflow:auto;

}

.main{

padding:15px;

}

.calendar-grid{

gap:8px;

padding:15px;

}

.day{

height:58px;

font-size:15px;

}

.calendar-nav h2{

font-size:22px;

min-width:auto;

}

}

@media(max-width:700px){

.cards{

grid-template-columns:1fr;

}

.summary{

grid-template-columns:1fr;

}

.action-grid{

grid-template-columns:repeat(2,1fr);

}

.legend{

justify-content:center;

}

}

@media(max-width:500px){

.day{

height:46px;

font-size:13px;

}

.calendar-grid{

gap:5px;

padding:10px;

}

.calendar-header{

flex-direction:column;

gap:15px;

}

.calendar-nav{

gap:10px;

}

.calendar-nav h2{

font-size:18px;

}

.weekday{

padding:6px 2px;

font-size:12px;

}

.action-grid{

grid-template-columns:1fr;

}

.buttons{

flex-direction:column;

}

.buttons button{

width:100%;

}

.sidebar h2{

font-size:22px;

}

}

/* ==========================================================
HISTORY PAGE
========================================================== */

.history-list{

display:flex;

flex-direction:column;

gap:14px;

max-height:520px;

overflow-y:auto;

}

.empty-state{

color:var(--gray);

text-align:center;

padding:30px 10px;

}

.history-row{

display:flex;

align-items:center;

justify-content:space-between;

gap:16px;

padding:16px 18px;

border-radius:16px;

background:#fafafa;

border:1px solid #f0f0f0;

transition:.25s;

}

.history-row:hover{

background:#ffeef5;

transform:translateX(2px);

}

.history-row-main{

display:flex;

align-items:flex-start;

gap:14px;

}

.history-flow-dot{

width:14px;

height:14px;

border-radius:50%;

margin-top:6px;

flex-shrink:0;

background:#ccc;

}

.history-flow-dot.flow-light{ background:#ffb7d5; }
.history-flow-dot.flow-medium{ background:#ff4f87; }
.history-flow-dot.flow-heavy{ background:#c2185b; }

.history-sub{

font-size:13px;

color:var(--gray);

margin-top:4px;

}

.history-note{

font-size:13px;

color:#888;

margin-top:6px;

font-style:italic;

}

.history-delete{

background:none;

color:#bbb;

font-size:16px;

padding:10px;

border-radius:50%;

transition:.25s;

flex-shrink:0;

}

.history-delete:hover{

background:#ffe0ea;

color:var(--danger);

}

body.dark .history-row{

background:#2a2a2a;

border-color:#3a3a3a;

}

body.dark .history-row:hover{

background:#333;

}

/* ==========================================================
SETTINGS PAGE
========================================================== */

.theme-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(140px,1fr));

gap:16px;

}

.theme-swatch{

padding:22px;

border-radius:16px;

color:white;

font-weight:600;

font-size:15px;

box-shadow:var(--shadow);

border:3px solid transparent;

transition:.25s;

}

.theme-swatch:hover{

transform:translateY(-3px);

}

.theme-swatch.active-theme{

border-color:var(--text);

transform:translateY(-3px);

}

/* ==========================================================
PERIOD BESTIE
LANDING PAGE (index.html)
========================================================== */

.background{

position:fixed;

inset:0;

z-index:-3;

overflow:hidden;

}

.background .circle{

position:absolute;

border-radius:50%;

filter:blur(60px);

opacity:.35;

}

.background .c1{

width:420px;

height:420px;

background:var(--primary);

top:-120px;

right:-100px;

}

.background .c2{

width:360px;

height:360px;

background:var(--secondary);

bottom:-100px;

left:-120px;

}

.background .c3{

width:260px;

height:260px;

background:var(--accent);

top:40%;

left:50%;

}

/* ---------- Navbar ---------- */

.navbar{

display:flex;

align-items:center;

justify-content:space-between;

padding:24px 6%;

position:relative;

z-index:10;

}

.navbar .logo{

font-size:24px;

font-weight:700;

color:var(--primary);

display:flex;

align-items:center;

gap:8px;

}

.nav-links{

list-style:none;

display:flex;

align-items:center;

gap:34px;

}

.nav-links li a{

font-weight:500;

color:var(--text);

transition:.25s;

}

.nav-links li a:hover{

color:var(--primary);

}

.nav-btn{

background:linear-gradient(135deg,var(--primary),#ff82b0);

color:white!important;

padding:12px 26px;

border-radius:14px;

font-weight:600;

box-shadow:0 10px 25px rgba(255,79,135,.3);

transition:.25s;

}

.nav-btn:hover{

transform:translateY(-2px);

}

.mobile-menu{

display:none;

font-size:22px;

color:var(--primary);

cursor:pointer;

}

/* ---------- Hero ---------- */

.hero{

display:flex;

align-items:center;

justify-content:space-between;

gap:40px;

padding:40px 6% 100px;

position:relative;

z-index:5;

flex-wrap:wrap;

}

.hero-left{

flex:1;

min-width:320px;

max-width:600px;

}

.hero-left h1{

font-size:48px;

font-weight:800;

line-height:1.2;

margin-bottom:20px;

}

.hero-left h1 span{

display:block;

color:var(--primary);

}

.hero-left p{

color:var(--gray);

font-size:17px;

line-height:1.7;

margin-bottom:30px;

max-width:520px;

}

.hero-buttons{

display:flex;

gap:18px;

margin-bottom:50px;

flex-wrap:wrap;

}

.btn-primary{

background:linear-gradient(135deg,var(--primary),#ff82b0);

color:white;

padding:16px 34px;

border-radius:16px;

font-weight:600;

box-shadow:0 15px 35px rgba(255,79,135,.3);

transition:.25s;

display:inline-block;

}

.btn-primary:hover{

transform:translateY(-3px);

}

.btn-secondary{

background:white;

color:var(--text);

padding:16px 34px;

border-radius:16px;

font-weight:600;

box-shadow:var(--shadow);

transition:.25s;

display:inline-block;

}

.btn-secondary:hover{

transform:translateY(-3px);

background:#fff0f6;

}

.stats{

display:flex;

gap:18px;

flex-wrap:wrap;

}

.stat-card{

background:rgba(255,255,255,.75);

backdrop-filter:blur(18px);

padding:20px 22px;

border-radius:18px;

box-shadow:var(--shadow);

min-width:140px;

}

.stat-card h2{

font-size:26px;

margin-bottom:6px;

}

.stat-card h3{

font-size:15px;

font-weight:600;

margin-bottom:4px;

}

.stat-card p{

font-size:12px;

color:var(--gray);

}

/* ---------- Hero Right: Phone mockup ---------- */

.hero-right{

flex:1;

display:flex;

justify-content:center;

min-width:300px;

}

.phone{

width:300px;

background:#1c1c1e;

border-radius:42px;

padding:14px;

box-shadow:0 35px 60px rgba(0,0,0,.25);

}

.phone-header{

display:flex;

justify-content:center;

padding:8px 0 14px;

}

.camera{

width:50px;

height:14px;

background:#000;

border-radius:10px;

}

.phone-screen{

background:linear-gradient(160deg,#fff6fb,#ffe7f2);

border-radius:30px;

padding:20px;

display:flex;

flex-direction:column;

gap:14px;

}

.today-card{

background:linear-gradient(135deg,var(--primary),#ff82b0);

color:white;

border-radius:18px;

padding:18px;

}

.today-card h4{

font-size:13px;

font-weight:500;

opacity:.9;

margin-bottom:6px;

}

.today-card h1{

font-size:30px;

}

.small-card{

background:white;

border-radius:16px;

padding:14px 16px;

display:flex;

justify-content:space-between;

align-items:center;

font-size:13px;

font-weight:500;

box-shadow:0 6px 16px rgba(0,0,0,.05);

}

.small-card strong{

color:var(--primary);

font-size:13px;

}

.calendar-preview{

background:white;

border-radius:16px;

padding:14px;

box-shadow:0 6px 16px rgba(0,0,0,.05);

}

.calendar-preview .week{

display:grid;

grid-template-columns:repeat(7,1fr);

text-align:center;

font-size:11px;

color:var(--gray);

font-weight:600;

margin-bottom:8px;

}

.calendar-preview .days{

display:grid;

grid-template-columns:repeat(7,1fr);

gap:6px;

}

.calendar-preview .days span{

aspect-ratio:1;

display:flex;

align-items:center;

justify-content:center;

font-size:11px;

border-radius:8px;

color:var(--text);

}

.calendar-preview .days span.period{

background:var(--period);

color:white;

}

.calendar-preview .days span.fertile{

background:var(--fertile);

color:white;

}

.calendar-preview .days span.ovulation{

background:var(--ovulation);

color:white;

}

/* ---------- Features ---------- */

.features{

text-align:center;

padding:60px 6% 80px;

position:relative;

z-index:5;

}

.features h2{

font-size:34px;

font-weight:700;

margin-bottom:12px;

}

.features > p{

color:var(--gray);

margin-bottom:50px;

}

.feature-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(240px,1fr));

gap:24px;

max-width:1100px;

margin:0 auto;

}

.feature-box{

background:rgba(255,255,255,.75);

backdrop-filter:blur(18px);

padding:34px 26px;

border-radius:22px;

box-shadow:var(--shadow);

text-align:left;

transition:.3s;

}

.feature-box:hover{

transform:translateY(-6px);

}

.feature-box i{

font-size:26px;

color:var(--primary);

margin-bottom:16px;

}

.feature-box h3{

font-size:18px;

margin-bottom:8px;

}

.feature-box p{

color:var(--gray);

font-size:14px;

line-height:1.6;

}

/* ---------- About ---------- */

.about{

padding:20px 6% 90px;

position:relative;

z-index:5;

}

.about-box{

max-width:780px;

margin:0 auto;

text-align:center;

background:rgba(255,255,255,.75);

backdrop-filter:blur(18px);

padding:60px 40px;

border-radius:28px;

box-shadow:var(--shadow);

}

.about-box h2{

font-size:30px;

margin-bottom:18px;

}

.about-box p{

color:var(--gray);

line-height:1.8;

margin-bottom:30px;

}

/* ---------- Footer ---------- */

footer{

background:rgba(255,255,255,.6);

backdrop-filter:blur(18px);

padding:50px 6% 30px;

position:relative;

z-index:5;

}

.footer{

text-align:center;

}

.footer h2{

font-size:24px;

color:var(--primary);

margin-bottom:10px;

}

.footer p{

color:var(--gray);

margin-bottom:18px;

}

.socials{

display:flex;

justify-content:center;

gap:20px;

margin-bottom:20px;

}

.socials a{

width:42px;

height:42px;

border-radius:50%;

background:white;

display:flex;

align-items:center;

justify-content:center;

box-shadow:var(--shadow);

color:var(--primary);

transition:.25s;

}

.socials a:hover{

transform:translateY(-3px);

background:var(--primary);

color:white;

}

.copyright{

font-size:13px;

color:#aaa;

}

/* ---------- Landing page responsive ---------- */

@media(max-width:900px){

.nav-links{

display:none;

}

.mobile-menu{

display:block;

}

.hero{

flex-direction:column;

text-align:center;

padding-top:10px;

}

.hero-left{

max-width:100%;

}

.hero-left p{

margin-left:auto;

margin-right:auto;

}

.hero-buttons{

justify-content:center;

}

.stats{

justify-content:center;

}

}

@media(max-width:480px){

.hero-left h1{

font-size:34px;

}

.navbar{

padding:18px 5%;

}

.phone{

width:260px;

}

}

/* ==========================================================
   PIN SYNC OVERLAY
========================================================== */

#pinOverlay{
position:fixed;
inset:0;
background:linear-gradient(135deg,#fff0f5,#ffe4ef);
display:flex;
align-items:center;
justify-content:center;
z-index:9999;
padding:20px;
}

.pin-box{
background:white;
border-radius:28px;
padding:40px 32px;
max-width:380px;
width:100%;
text-align:center;
box-shadow:0 20px 60px rgba(255,79,135,.18);
}

.pin-logo{
font-size:48px;
margin-bottom:8px;
}

.pin-box h2{
font-size:24px;
font-weight:700;
color:#ff4f87;
margin-bottom:10px;
}

.pin-sub{
font-size:14px;
color:#888;
margin-bottom:24px;
line-height:1.6;
}

.pin-sub span{
color:#b0b0b0;
font-size:12px;
}

#pinField{
width:100%;
padding:14px 18px;
border-radius:14px;
border:2px solid #f0c0d0;
font-size:22px;
text-align:center;
letter-spacing:8px;
outline:none;
transition:.2s;
box-sizing:border-box;
}

#pinField:focus{
border-color:#ff4f87;
box-shadow:0 0 0 3px rgba(255,79,135,.12);
}

.pin-error{
color:#e74c3c;
font-size:13px;
margin:8px 0;
display:none;
min-height:18px;
}

#pinSubmit{
width:100%;
margin-top:16px;
padding:15px;
border-radius:14px;
background:linear-gradient(135deg,#ff4f87,#ff82b0);
color:white;
font-size:16px;
font-weight:700;
border:none;
cursor:pointer;
transition:.3s;
}

#pinSubmit:hover{
transform:translateY(-2px);
box-shadow:0 8px 24px rgba(255,79,135,.3);
}

#pinSubmit:disabled{
opacity:.6;
transform:none;
cursor:default;
}

.pin-skip{
background:none;
border:none;
color:#bbb;
font-size:13px;
margin-top:14px;
cursor:pointer;
text-decoration:underline;
display:block;
width:100%;
}

.pin-skip:hover{
color:#888;
}

/* ==========================================================
   MADE WITH LOVE TAGLINE (sidebar + navbar header)
========================================================== */

.sidebar .made-with-love{
margin-top:-22px;
font-size:12px;
font-weight:500;
font-style:italic;
color:var(--primary);
opacity:.7;
letter-spacing:.2px;
}

.navbar .logo .made-with-love{
font-size:11px;
font-weight:500;
font-style:italic;
color:var(--primary);
opacity:.7;
margin-left:6px;
white-space:nowrap;
}

@media (max-width: 768px){
.navbar .logo .made-with-love{
display:none;
}
}