/* =========================================================
   MIYLOV - GLOBAL STYLESHEET
   ---------------------------------------------------------
   Tek CSS dosyası

   Bölümler:
   01. Global / Core
   02. Functional UI extensions
   03. Dashboard / Home
   04. Authentication / Register
   05. Profile

   Not: Sayfa-özel CSS değişkenleri kendi container'ları içinde
   tutulur. Böylece aynı isimli global değişkenler birbirini
   ezmez ve CSS çakışmaları azaltılır.
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

:root {
  --miylov-bg: #f5f6f9;
  --miylov-white: #fff;
  --miylov-text: #243447;
  --miylov-muted: #8993a4;
  --miylov-border: #e7eaf0;
  --miylov-primary: #14b8a6;
  --miylov-primary-dark: #0f9f91;
  --sidebar-width: 252px;
  --topbar-height: 64px;
}

html, body { min-height: 100%; }
body {
  margin: 0;
  background: var(--miylov-bg);
  color: var(--miylov-text);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: .875rem;
}
a { text-decoration: none; }
button, input { font: inherit; }

.app-shell { min-height: 100vh; }
.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 1040; width: var(--sidebar-width);
  background: #fff; border-right: 1px solid var(--miylov-border);
  display: flex; flex-direction: column;
  transform: translateX(0); transition: transform .25s ease, box-shadow .25s ease;
}
.sidebar-closed .sidebar { transform: translateX(-100%); box-shadow: none; }
.main-area { min-height: 100vh; margin-left: var(--sidebar-width); transition: margin-left .25s ease; }
.sidebar-closed .main-area { margin-left: 0; }

.sidebar-brand { height: var(--topbar-height); display:flex; align-items:center; padding: 0 24px; border-bottom:1px solid var(--miylov-border); }
.brand-mark { display:flex; align-items:center; gap:9px; color:#172b3a; font-size:1.55rem; font-weight:700; letter-spacing:-.04em; }
.brand-text::first-letter { color:var(--miylov-primary); }
.brand-symbol { width:29px; height:29px; border:5px solid var(--miylov-primary); border-right-color:transparent; border-radius:50%; display:inline-block; position:relative; }
.brand-symbol span { position:absolute; width:9px; height:9px; border-radius:50%; background:#18b79f; right:-5px; top:5px; }
.sidebar-nav { padding: 22px 14px; overflow:auto; }
.nav-section-title { padding: 0 13px 9px; color:#b0b7c3; font-size:.67rem; font-weight:700; letter-spacing:.12em; }
.nav-item-link { display:flex; align-items:center; gap:13px; padding: 11px 13px; margin: 3px 0; border-radius:8px; color:#697586; font-weight:500; transition:.18s ease; }
.nav-item-link i { width:20px; font-size:1.05rem; text-align:center; }
.nav-item-link:hover { color:var(--miylov-primary); background:#f1fbf9; }
.nav-item-link.active { color:var(--miylov-primary); background:#eafaf7; font-weight:600; }
.sidebar-footer { margin-top:auto; padding:16px; border-top:1px solid var(--miylov-border); }
.mini-profile { display:flex; align-items:center; gap:10px; }
.avatar, .topbar-avatar { width:38px; height:38px; border-radius:50%; display:grid; place-items:center; font-weight:700; background:#e5f7f4; color:#0e9e8d; }
.profile-copy { display:flex; flex-direction:column; min-width:0; }
.profile-copy strong { font-size:.78rem; white-space:nowrap; }
.profile-copy span { color:var(--miylov-muted); font-size:.7rem; }

.topbar { height:var(--topbar-height); background:#fff; border-bottom:1px solid var(--miylov-border); display:flex; align-items:center; justify-content:space-between; padding:0 22px; position:sticky; top:0; z-index:1020; }
.topbar-left, .topbar-actions { display:flex; align-items:center; gap:10px; }
.icon-button { width:38px; height:38px; border:0; background:transparent; color:#8290a1; display:grid; place-items:center; border-radius:8px; }
.icon-button:hover { background:#f4f6f8; color:var(--miylov-primary); }
.menu-toggle { font-size:1.35rem; color:#6e7f91; }
.topbar-search { width:280px; display:flex; align-items:center; gap:9px; color:#9aa4b2; }
.topbar-search input { border:0; outline:0; background:transparent; width:100%; color:var(--miylov-text); }
.topbar-search input::placeholder { color:#adb5c1; }
.notification-button { position:relative; }
.notification-dot { position:absolute; top:3px; right:2px; min-width:16px; height:16px; padding:0 4px; border-radius:20px; background:#ee5b68; color:#fff; font-size:.58rem; display:grid; place-items:center; border:2px solid #fff; }
.message-dot { background:#377dff; }
.topbar-avatar { position:relative; width:36px; height:36px; margin-left:5px; }
.online-dot { position:absolute; right:-1px; bottom:0; width:8px; height:8px; border:2px solid #fff; background:#3bb273; border-radius:50%; }

.content { min-height:calc(100vh - var(--topbar-height)); }
.page-shell { padding: 28px 0 18px; }
.content-container { width:min(100% - 48px, 1380px); margin:0 auto; }
.page-heading { display:flex; justify-content:space-between; align-items:center; gap:18px; margin-bottom:25px; }
.page-heading h1 { margin:0; font-size:1.45rem; font-weight:600; letter-spacing:-.025em; }
.page-heading p { margin:7px 0 0; color:var(--miylov-muted); }
.heading-actions { display:flex; gap:9px; }

.stat-card { background:#fff; border:1px solid var(--miylov-border); border-radius:8px; padding:21px; min-height:110px; display:flex; align-items:center; gap:17px; box-shadow:0 2px 7px rgba(28,40,57,.025); transition:transform .18s, box-shadow .18s; }
.stat-card:hover { transform:translateY(-2px); box-shadow:0 9px 22px rgba(28,40,57,.07); }
.stat-icon { width:58px; height:58px; flex:0 0 58px; border-radius:10px; display:grid; place-items:center; font-size:1.5rem; }
.icon-revenue { color:#10b89d; background:#e9faf6; }
.icon-sales { color:#9b7bea; background:#f1edfd; }
.icon-templates { color:#168dff; background:#e9f4ff; }
.icon-clients { color:#ff826f; background:#fff0ed; }
.stat-copy { min-width:0; }
.stat-value { font-size:1.2rem; line-height:1.2; font-weight:500; color:#344454; }
.stat-label { color:#9aa4b2; margin-top:5px; }
.stat-trend { margin-top:7px; font-size:.67rem; font-weight:600; }
.positive { color:#18a990; }.neutral { color:#a1a9b4; }

.dashboard-card { border:1px solid var(--miylov-border); border-radius:8px; box-shadow:0 2px 7px rgba(28,40,57,.025); overflow:hidden; background:#fff; }
.dashboard-header { background:#fff; border-bottom:1px solid #eef0f4; padding:20px 22px; display:flex; align-items:center; justify-content:space-between; }
.dashboard-header h2 { margin:0; font-size:1rem; font-weight:600; color:#304153; }
.dashboard-header span { display:block; margin-top:4px; color:#9ba5b2; font-size:.73rem; }
.chart-card-body { padding:20px 22px 16px; }
.chart-wrap { width:100%; min-height:330px; }
.traffic-chart { width:100%; height:330px; display:block; overflow:visible; }
.grid-lines line { stroke:#dfe3e8; stroke-width:1; stroke-dasharray:2 4; }
.axis-labels text { fill:#9aa4b2; font-size:11px; font-family:Inter, sans-serif; }
.area { stroke-width:0; }
.area.green { fill:url(#greenArea); stroke:#62b86f; }
.area.purple { fill:url(#purpleArea); stroke:#727bc8; }
.area.coral { fill:url(#coralArea); stroke:#ef817a; }
.legend-row { display:flex; flex-wrap:wrap; gap:20px; padding:6px 6px 0 45px; color:#8993a2; font-size:.72rem; }
.legend-dot { width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:6px; background:#62b86f; }
.legend-dot.purple { background:#727bc8; }.legend-dot.coral { background:#ef817a; }

.metric-list { padding:23px 22px 14px; }
.metric-item { margin-bottom:25px; }.metric-item:last-child { margin-bottom:7px; }
.metric-top { display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:10px; }
.metric-title { color:#778496; font-size:.87rem; font-weight:500; }.metric-value { color:#344454; font-size:.75rem; }
.metric-progress { height:5px; background:#edf0f3; border-radius:99px; }
.metric-progress .progress-bar { border-radius:99px; }.metric-green { background:#19b59d; }.metric-purple { background:#9d7fe5; }.metric-blue { background:#149df2; }.metric-coral { background:#f38a78; }

.activity-row { display:flex; align-items:center; gap:13px; padding:15px 20px; border-bottom:1px solid #f0f1f4; }
.activity-row:last-child { border-bottom:0; }.activity-avatar { width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:#eef8f6; color:#13a891; font-size:.68rem; font-weight:700; flex:0 0 auto; }
.activity-copy { display:flex; flex-direction:column; gap:3px; min-width:0; }.activity-copy strong { font-size:.78rem; }.activity-copy span, .activity-row time { color:#9aa4b2; font-size:.7rem; }.activity-row time { margin-left:auto; white-space:nowrap; }
.small-link { color:var(--miylov-primary); font-size:.75rem; font-weight:600; }
.quick-actions { padding:8px 16px 14px; }.quick-action { display:flex; align-items:center; gap:12px; padding:13px 7px; color:inherit; border-bottom:1px solid #f0f1f4; }.quick-action:last-child { border-bottom:0; }.quick-action:hover { color:var(--miylov-primary); }.quick-icon { width:38px; height:38px; display:grid; place-items:center; background:#f2faf9; color:#16ae98; border-radius:8px; }.quick-action > span:nth-child(2) { flex:1; display:flex; flex-direction:column; gap:3px; }.quick-action strong { font-size:.78rem; color:#334455; }.quick-action small { color:#9aa4b2; }.quick-action > i { color:#adb5bf; }

.placeholder-panel { min-height:350px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:40px; }.placeholder-panel h3 { font-size:1rem; margin:14px 0 6px; }.placeholder-panel p { max-width:560px; color:#9aa4b2; line-height:1.7; }.empty-icon { width:60px; height:60px; border-radius:50%; display:grid; place-items:center; background:#eafaf7; color:var(--miylov-primary); font-size:1.5rem; }
.app-footer { display:flex; justify-content:space-between; gap:20px; color:#9aa4b2; font-size:.7rem; padding:24px 3px 5px; }

.sidebar-backdrop { position:fixed; inset:0; z-index:1030; border:0; background:rgba(22,31,43,.35); }
.startup-loader { min-height:100vh; display:grid; place-items:center; align-content:center; gap:12px; color:#8993a4; }

@media (max-width: 991.98px) {
  .sidebar { box-shadow: 8px 0 30px rgba(20,30,40,.08); }
  .main-area, .sidebar-closed .main-area { margin-left:0; }
  .topbar-search { width:190px; }
  .content-container { width:min(100% - 32px, 1380px); }
}
@media (max-width: 575.98px) {
  .topbar { padding:0 12px; }.topbar-search { display:none; }
  .topbar-actions { gap:2px; }.topbar-actions .icon-button:first-child { display:none; }
  .page-shell { padding-top:20px; }.content-container { width:calc(100% - 24px); }
  .page-heading { align-items:flex-start; flex-direction:column; }.heading-actions { width:100%; }.heading-actions .btn { flex:1; }
  .stat-card { padding:17px; }.stat-icon { width:50px; height:50px; flex-basis:50px; }
  .chart-card-body { padding:10px 8px 14px; }.chart-wrap, .traffic-chart { height:280px; min-height:280px; }
  .legend-row { padding-left:18px; gap:12px; }
  .app-footer { flex-direction:column; gap:5px; }
}

/* Functional UI extensions */
.search-clear { border:0; background:transparent; color:#9aa4b2; padding:0; }
kbd { font-size:.62rem; padding:3px 6px; color:#9aa4b2; background:#f4f6f8; border:1px solid #e3e7ec; border-radius:5px; white-space:nowrap; }
.global-search-results { background:#fff; border:1px solid var(--miylov-border); border-radius:10px; box-shadow:0 14px 40px rgba(28,40,57,.12); overflow:hidden; }
.global-search-results button { width:100%; display:flex; align-items:center; gap:12px; padding:12px 14px; border:0; border-bottom:1px solid #f0f2f5; background:#fff; color:#344454; text-align:left; }
.global-search-results button:last-child { border-bottom:0; }.global-search-results button:hover { background:#f7fbfa; }.global-search-results button > i:last-child { margin-left:auto; color:#a4adba; }
.global-search-results span { display:flex; flex-direction:column; gap:2px; }.global-search-results small { color:#98a1ae; }
.notification-menu,.message-menu,.profile-menu { width:330px; border:1px solid var(--miylov-border); box-shadow:0 14px 40px rgba(28,40,57,.12); border-radius:10px; padding:0; overflow:hidden; }
.message-menu { width:360px; }.notification-item,.message-item { width:100%; border:0; background:#fff; text-align:left; display:flex; gap:11px; padding:13px 15px; border-bottom:1px solid #f0f2f5; }.notification-item:hover,.message-item:hover { background:#f7fbfa; }.notification-item > i { width:34px;height:34px;border-radius:8px;background:#eafaf7;color:var(--miylov-primary);display:grid;place-items:center;flex:0 0 auto; }.notification-item span,.message-item span:not(.avatar) { display:flex; flex-direction:column; gap:3px; }.notification-item small,.message-item small,.message-item time,.profile-menu-head small { color:#98a1ae; font-size:.7rem; }.dropdown-header { padding:13px 15px; }.dropdown-footer { padding:7px 12px; text-align:right; background:#fafbfc; }.badge-soft { background:#eafaf7;color:#119b89;padding:4px 7px;border-radius:99px;font-size:.65rem; }.message-item time { margin-left:auto; white-space:nowrap; }.avatar-sm { width:32px;height:32px;font-size:.65rem; }.avatar-lg { width:44px;height:44px; }.profile-menu-head { display:flex;gap:10px;align-items:center;padding:15px; }.profile-menu-head > div:last-child { display:flex;flex-direction:column;gap:2px; }.profile-menu .dropdown-item { padding:9px 15px; font-size:.8rem; }.profile-menu .dropdown-item i { width:22px; }
.miylov-toast { min-width:300px; background:#fff; border:1px solid var(--miylov-border)!important; box-shadow:0 12px 35px rgba(28,40,57,.13); color:#344454; opacity:1; transition:transform .25s ease, opacity .25s ease; }.miylov-toast.success strong { color:#139e87; }.miylov-toast.warning strong { color:#c58a16; }.miylov-toast.danger strong { color:#d64f5e; }.miylov-toast.info strong { color:#3279d8; }.miylov-toast.toast-leave { opacity:0; transform:translateY(10px); }
.toolbar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }.toolbar .form-control,.toolbar .form-select { min-height:38px; font-size:.78rem; border-color:#e1e6eb; }.table-modern { margin:0; }.table-modern th { color:#8993a2; font-size:.68rem; text-transform:uppercase; letter-spacing:.04em; font-weight:700; padding:13px 16px; border-bottom:1px solid #e9edf1; background:#fbfcfd; }.table-modern td { padding:13px 16px; vertical-align:middle; color:#526173; font-size:.77rem; border-color:#f0f2f5; }.table-modern tbody tr:hover { background:#fbfefd; }.status-badge { display:inline-flex; padding:4px 8px; border-radius:99px; font-size:.65rem; font-weight:600; }.status-active { color:#118f79;background:#e8faf5; }.status-pending { color:#a9760c;background:#fff7df; }.status-paused { color:#667085;background:#eef1f4; }.status-danger { color:#c74452;background:#fff0f2; }.table-avatar { width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#eafaf7;color:#129e8a;font-size:.63rem;font-weight:700; }.user-cell { display:flex;align-items:center;gap:10px; }.user-cell > div:last-child { display:flex;flex-direction:column;gap:2px; }.user-cell small { color:#9aa4b2; }.table-actions { display:flex;gap:4px;justify-content:flex-end; }.table-actions .icon-button { width:32px;height:32px; }
.form-control:focus,.form-select:focus { border-color:#8bd9cd; box-shadow:0 0 0 .2rem rgba(20,184,166,.12); }.form-label { font-size:.74rem;font-weight:600;color:#59687a;margin-bottom:6px; }.modal-content { border:0;border-radius:12px;box-shadow:0 18px 60px rgba(25,35,50,.2); }.modal-header,.modal-footer { border-color:#eef1f4; }.modal-title { font-size:1rem;font-weight:600; }.btn-primary { --bs-btn-bg:#14b8a6;--bs-btn-border-color:#14b8a6;--bs-btn-hover-bg:#0f9f91;--bs-btn-hover-border-color:#0f9f91; }
.calendar-toolbar { display:flex;align-items:center;justify-content:space-between;gap:10px; }.calendar-title { font-size:1.05rem;font-weight:600; }.calendar-grid { display:grid;grid-template-columns:repeat(7,1fr);border-top:1px solid #edf0f3;border-left:1px solid #edf0f3; }.calendar-head { padding:10px 8px;color:#9aa4b2;font-size:.68rem;font-weight:700;text-align:center;border-right:1px solid #edf0f3;border-bottom:1px solid #edf0f3; }.calendar-cell { min-height:110px;padding:9px;border-right:1px solid #edf0f3;border-bottom:1px solid #edf0f3;background:#fff; }.calendar-cell.muted { background:#fafbfc;color:#c2c8d0; }.calendar-cell.today { background:#f1fbf9; }.calendar-day { font-size:.72rem;font-weight:600;color:#687789; }.calendar-cell.today .calendar-day { width:25px;height:25px;display:grid;place-items:center;border-radius:50%;background:var(--miylov-primary);color:#fff; }.event-chip { display:block;margin-top:8px;padding:4px 6px;border-radius:5px;background:#eafaf7;color:#129b87;font-size:.62rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }.event-chip.purple { background:#f1edfd;color:#8065c6; }.event-chip.coral { background:#fff0ed;color:#db6f5e; }
.setting-row { display:flex;align-items:center;justify-content:space-between;gap:20px;padding:17px 0;border-bottom:1px solid #eef1f4; }.setting-row:last-child { border-bottom:0; }.setting-copy { display:flex;flex-direction:column;gap:4px; }.setting-copy strong { font-size:.8rem; }.setting-copy span { color:#9aa4b2;font-size:.7rem; }.switch { position:relative;width:44px;height:24px;display:inline-block; }.switch input { opacity:0;width:0;height:0; }.switch-slider { position:absolute;inset:0;border-radius:30px;background:#dfe4e9;cursor:pointer;transition:.2s; }.switch-slider:before { content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.18);transition:.2s; }.switch input:checked + .switch-slider { background:var(--miylov-primary); }.switch input:checked + .switch-slider:before { transform:translateX(20px); }
.kpi-mini { padding:16px;border:1px solid #eef1f4;border-radius:9px;background:#fff; }.kpi-mini span { color:#929baa;font-size:.68rem; }.kpi-mini strong { display:block;font-size:1.2rem;margin-top:5px; }.chart-canvas { width:100%;height:330px;display:block; }.bar-canvas { width:100%;height:240px;display:block; }
html[data-theme="dark"] body { background:#111827;color:#e5e7eb; }.dark-mode .sidebar,.dark-mode .topbar,.dark-mode .dashboard-card,.dark-mode .stat-card,.dark-mode .calendar-cell,.dark-mode .modal-content,.dark-mode .global-search-results,.dark-mode .notification-menu,.dark-mode .message-menu,.dark-mode .profile-menu { background:#18212f;color:#e5e7eb;border-color:#293548; }.dark-mode .dashboard-header,.dark-mode .table-modern th { background:#18212f;border-color:#293548; }.dark-mode .topbar,.dark-mode .sidebar { border-color:#293548; }.dark-mode .nav-item-link { color:#aeb9c8; }.dark-mode .nav-item-link:hover,.dark-mode .nav-item-link.active { background:#20352f;color:#4ed7c1; }.dark-mode .stat-value,.dark-mode .metric-value,.dark-mode .dashboard-header h2,.dark-mode .quick-action strong,.dark-mode .activity-copy strong,.dark-mode .setting-copy strong,.dark-mode .calendar-day,.dark-mode .calendar-title { color:#e5e7eb; }.dark-mode .dashboard-header span,.dark-mode .stat-label,.dark-mode .metric-title,.dark-mode .activity-copy span,.dark-mode .activity-row time,.dark-mode .quick-action small,.dark-mode .setting-copy span { color:#8795a8; }.dark-mode .table-modern td,.dark-mode .table-modern th,.dark-mode .activity-row,.dark-mode .quick-action,.dark-mode .setting-row { border-color:#293548; }.dark-mode .table-modern th { color:#9aa8bb; }.dark-mode .form-control,.dark-mode .form-select { background:#121a26;color:#e5e7eb;border-color:#334155; }.dark-mode .dropdown-menu,.dark-mode .notification-item,.dark-mode .message-item,.dark-mode .dropdown-footer { background:#18212f;color:#e5e7eb;border-color:#293548; }.dark-mode .dropdown-item { color:#dbe3ec; }.dark-mode .dropdown-item:hover,.dark-mode .notification-item:hover,.dark-mode .message-item:hover { background:#202d3e; }.dark-mode .topbar-search input { color:#e5e7eb; }.dark-mode kbd { background:#222d3d;border-color:#334155; }.dark-mode .sidebar-brand { border-color:#293548; }.dark-mode .brand-mark { color:#e5e7eb; }
@media (max-width: 991.98px) { .global-search-results { left:16px;top:68px; } .calendar-cell { min-height:90px; } }
@media (max-width: 767.98px) { .calendar-cell { min-height:70px;padding:6px; }.event-chip { font-size:.55rem; }.calendar-head { font-size:.58rem; } .notification-menu,.message-menu,.profile-menu { width:min(340px,calc(100vw - 24px)); } }
.compact-mode .dashboard-header { padding-top:14px;padding-bottom:14px; }.compact-mode .activity-row { padding-top:10px;padding-bottom:10px; }.compact-mode .stat-card { min-height:96px;padding:16px; }
.empty-state{min-height:180px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#8f99a7;padding:30px}.empty-state i{font-size:2rem;color:#aeb7c2}.empty-state strong{font-size:.82rem;color:#5d6b7b}.empty-state span{font-size:.7rem}













/* Miylov Home — production-ready visual layer */
:root {
    --miylov-primary: #18b79f;
    --miylov-primary-dark: #109a86;
    --miylov-ink: #172322;
    --miylov-muted: #71807d;
    --miylov-line: #e7eeec;
    --miylov-surface: #ffffff;
    --miylov-bg: #f5f8f7;
    --miylov-soft: #eaf8f5;
    --miylov-warning: #e9a23b;
}

.dashboard-shell {
    min-height: 100vh;
    background: var(--miylov-bg);
    color: var(--miylov-ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.dashboard-content {
    max-width: 1480px;
    margin: 0 auto;
    padding: 34px 38px 56px;
}

.dashboard-hero {
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 38px 44px;
    margin-bottom: 24px;
    border: 1px solid var(--miylov-line);
    border-radius: 28px;
    background: linear-gradient(135deg, #fff 0%, #f5fffc 100%);
    overflow: hidden;
}

.eyebrow, .panel-kicker {
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    color: var(--miylov-primary-dark);
}

.hero-copy h1 {
    margin: 7px 0 5px;
    font-size: clamp(32px, 4vw, 48px);
    letter-spacing: -.045em;
}

.hero-copy p {
    margin: 0;
    color: var(--miylov-muted);
    font-size: 16px;
}

.hero-actions {
    display: flex;
    gap: 10px;
    margin-top: 25px;
    flex-wrap: wrap;
}

.primary-action, .secondary-action {
    border: 0;
    border-radius: 12px;
    padding: 12px 17px;
    font-weight: 750;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.primary-action {
    background: var(--miylov-primary);
    color: white;
    box-shadow: 0 7px 20px rgba(24,183,159,.18);
}

.secondary-action {
    background: #edf3f1;
    color: var(--miylov-ink);
}

    .primary-action:hover, .secondary-action:hover {
        transform: translateY(-1px);
    }

.mascot-card {
    position: relative;
    width: 270px;
    height: 180px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
}

.mascot-glow {
    position: absolute;
    width: 180px;
    height: 130px;
    border-radius: 50%;
    background: #dff7f1;
    filter: blur(2px);
}

.dog {
    position: relative;
    width: 128px;
    height: 112px;
    z-index: 2;
}

.head {
    position: absolute;
    inset: 17px 12px 5px;
    border-radius: 47% 47% 45% 45%;
    background: #fff;
    border: 5px solid var(--miylov-ink);
}

.ear {
    position: absolute;
    top: 4px;
    width: 45px;
    height: 55px;
    background: #fff;
    border: 5px solid var(--miylov-ink);
    z-index: 0;
}

.ear-left {
    left: 0;
    border-radius: 55% 30% 55% 45%;
    transform: rotate(-22deg);
}

.ear-right {
    right: 0;
    border-radius: 30% 55% 45% 55%;
    transform: rotate(22deg);
}

.eye {
    position: absolute;
    top: 38px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--miylov-ink);
}

.eye-left {
    left: 29px;
}

.eye-right {
    right: 29px;
}

.snout {
    position: absolute;
    left: 50%;
    bottom: 16px;
    width: 45px;
    height: 33px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: #f2f7f5;
}

.nose {
    position: absolute;
    top: 6px;
    left: 50%;
    width: 12px;
    height: 9px;
    transform: translateX(-50%);
    border-radius: 55%;
    background: var(--miylov-ink);
}

.mouth {
    position: absolute;
    top: 15px;
    left: 50%;
    width: 15px;
    height: 8px;
    transform: translateX(-50%);
    border-bottom: 2px solid var(--miylov-ink);
    border-radius: 0 0 50% 50%;
}

.mascot-bubble {
    position: absolute;
    right: -3px;
    bottom: 2px;
    padding: 9px 12px;
    border-radius: 13px;
    background: white;
    border: 1px solid var(--miylov-line);
    box-shadow: 0 8px 25px rgba(24,50,46,.08);
    font-size: 12px;
    font-weight: 700;
    z-index: 3;
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.summary-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 15px;
    min-height: 108px;
    padding: 20px;
    background: var(--miylov-surface);
    border: 1px solid var(--miylov-line);
    border-radius: 19px;
}

.summary-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 13px;
    background: var(--miylov-soft);
    color: var(--miylov-primary-dark);
    font-weight: 900;
}

.summary-card.warning .summary-icon {
    background: #fff4e3;
    color: #c47b14;
}

.summary-card span, .summary-card small {
    display: block;
    color: var(--miylov-muted);
    font-size: 12px;
}

.summary-card strong {
    display: inline-block;
    margin-right: 5px;
    font-size: 27px;
    letter-spacing: -.04em;
}

.summary-card small {
    display: inline;
}

.mini-progress {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 12px;
    height: 4px;
    border-radius: 4px;
    background: #e8efed;
    overflow: hidden;
}

    .mini-progress span {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: var(--miylov-primary);
    }

.dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(300px, .75fr);
    gap: 20px;
}

.main-column, .side-column {
    min-width: 0;
    display: grid;
    gap: 20px;
}

.panel {
    background: var(--miylov-surface);
    border: 1px solid var(--miylov-line);
    border-radius: 20px;
    overflow: hidden;
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px;
}

    .panel-header h2 {
        margin: 5px 0 0;
        font-size: 18px;
        letter-spacing: -.025em;
    }

    .panel-header a, .period {
        color: var(--miylov-primary-dark);
        font-size: 12px;
        font-weight: 750;
        text-decoration: none;
    }

.reminder-list {
    padding: 0 12px 12px;
}

.reminder-row {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 72px;
    padding: 10px 12px;
    border-top: 1px solid #f0f4f3;
}

    .reminder-row:first-child {
        border-top: 0;
    }

.check-button {
    width: 25px;
    height: 25px;
    border: 2px solid #cbd8d5;
    border-radius: 50%;
    background: white;
    color: white;
    cursor: pointer;
    font-size: 13px;
    font-weight: 900;
}

.completed .check-button {
    border-color: var(--miylov-primary);
    background: var(--miylov-primary);
}

.reminder-info {
    flex: 1;
    min-width: 0;
}

    .reminder-info strong {
        display: block;
        font-size: 14px;
    }

    .reminder-info span {
        display: block;
        margin-top: 4px;
        color: var(--miylov-muted);
        font-size: 11px;
    }

.completed .reminder-info strong {
    text-decoration: line-through;
    color: #82908e;
}

.reminder-time {
    font-size: 13px;
    font-weight: 800;
    color: #51615e;
}

.bottom-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 20px;
}

.weekly-panel {
    min-height: 285px;
}

.chart {
    height: 135px;
    display: flex;
    align-items: flex-end;
    gap: 12px;
    padding: 0 24px;
    border-top: 1px solid #f0f4f3;
    border-bottom: 1px solid #f0f4f3;
}

.chart-item {
    height: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 7px;
}

.bar-wrap {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
}

.bar {
    width: 100%;
    min-height: 8px;
    border-radius: 6px 6px 2px 2px;
    background: var(--miylov-primary);
    opacity: .85;
}

.chart-item span {
    color: var(--miylov-muted);
    font-size: 10px;
}

.weekly-footer {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 17px 24px;
}

    .weekly-footer strong {
        font-size: 25px;
    }

    .weekly-footer span {
        color: var(--miylov-muted);
        font-size: 11px;
    }

    .weekly-footer b {
        margin-left: auto;
        color: var(--miylov-primary-dark);
    }

.upcoming-list {
    padding: 0 20px 18px;
}

.upcoming-item {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 11px 0;
    border-top: 1px solid #f0f4f3;
}

.date-box {
    width: 45px;
    height: 45px;
    display: grid;
    place-items: center;
    align-content: center;
    flex: 0 0 auto;
    border-radius: 11px;
    background: #eff8f5;
}

    .date-box b {
        font-size: 16px;
        line-height: 15px;
    }

    .date-box span {
        font-size: 8px;
        font-weight: 800;
        color: var(--miylov-primary-dark);
    }

.upcoming-item strong, .upcoming-item span {
    display: block;
}

.upcoming-item strong {
    font-size: 12px;
}

.upcoming-item span {
    margin-top: 4px;
    color: var(--miylov-muted);
    font-size: 10px;
}

.overdue-panel {
    border-color: #f0e5d5;
}

.overdue-list {
    padding: 0 20px 18px;
}

.overdue-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 0;
    border-top: 1px solid #f3eee7;
}

    .overdue-item:first-child {
        border-top: 0;
    }

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--miylov-warning);
    flex: 0 0 auto;
}

.overdue-item div {
    flex: 1;
}

.overdue-item strong, .overdue-item span {
    display: block;
}

.overdue-item strong {
    font-size: 12px;
}

.overdue-item div span {
    margin-top: 3px;
    color: var(--miylov-muted);
    font-size: 10px;
}

.activity-list {
    padding: 0 20px 18px;
}

.activity-item {
    display: flex;
    gap: 11px;
    padding: 12px 0;
    border-top: 1px solid #f0f4f3;
}

.activity-icon {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: #eff8f5;
    color: var(--miylov-primary-dark);
    font-size: 12px;
    flex: 0 0 auto;
}

.activity-item strong, .activity-item small {
    display: block;
}

.activity-item strong {
    font-size: 11px;
}

.activity-item small {
    margin-top: 4px;
    color: var(--miylov-muted);
    font-size: 10px;
}

.quote-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 19px;
    border-radius: 20px;
    background: var(--miylov-ink);
    color: white;
}

    .quote-card > span {
        font-size: 27px;
    }

    .quote-card strong {
        font-size: 12px;
    }

    .quote-card p {
        margin: 4px 0 0;
        color: #b9c9c6;
        font-size: 10px;
        line-height: 1.5;
    }

.modal-backdrop {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(13,29,27,.42);
    backdrop-filter: blur(5px);
    z-index: 1000;
}

.reminder-modal {
    width: min(500px,100%);
    padding: 26px;
    border-radius: 22px;
    background: white;
    box-shadow: 0 30px 80px rgba(0,0,0,.18);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 22px;
}

    .modal-header h2 {
        margin: 4px 0 0;
        font-size: 21px;
    }

    .modal-header button {
        border: 0;
        background: #f0f4f3;
        width: 32px;
        height: 32px;
        border-radius: 10px;
        font-size: 20px;
        cursor: pointer;
    }

.reminder-modal label {
    display: block;
    margin-bottom: 15px;
    font-size: 11px;
    font-weight: 800;
    color: #53615f;
}

.reminder-modal input, .reminder-modal select {
    display: block;
    width: 100%;
    margin-top: 7px;
    box-sizing: border-box;
    padding: 12px 13px;
    border: 1px solid #dce6e3;
    border-radius: 11px;
    outline: none;
    font: inherit;
}

    .reminder-modal input:focus, .reminder-modal select:focus {
        border-color: var(--miylov-primary);
    }

.modal-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 22px;
}

@media (max-width: 1100px) {
    .summary-grid {
        grid-template-columns: repeat(2,1fr);
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .dashboard-content {
        padding: 18px 14px 40px;
    }

    .dashboard-hero {
        padding: 27px 23px;
        min-height: 0;
    }

    .mascot-card {
        display: none;
    }

    .summary-grid, .bottom-grid {
        grid-template-columns: 1fr;
    }

    .summary-card {
        min-height: 90px;
    }

    .panel-header {
        padding: 18px;
    }

    .reminder-list, .activity-list, .overdue-list, .upcoming-list {
        padding-left: 10px;
        padding-right: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        transition: none !important;
    }
}





.miylov-widget {
    background: #fff;
    border: 1px solid #e8ebef;
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 4px 18px rgba(0,0,0,.04)
}

.miylov-widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px
}

.miylov-widget-title {
    font-weight: 700;
    font-size: 1rem
}

.miylov-muted {
    color: #77808c;
    font-size: .86rem
}

.miylov-list {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.miylov-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f0f2f4
}

    .miylov-row:last-child {
        border-bottom: 0
    }

.miylov-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: #f4f6f8
}

.miylov-grow {
    flex: 1
}

.miylov-badge {
    font-size: .75rem;
    border-radius: 999px;
    padding: 4px 8px;
    background: #f1f3f5
}

.miylov-progress {
    height: 8px;
    border-radius: 999px;
    background: #edf0f2;
    overflow: hidden
}

    .miylov-progress > span {
        display: block;
        height: 100%;
        background: currentColor;
        border-radius: inherit
    }

.miylov-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 12px
}

.miylov-stat {
    padding: 14px;
    border: 1px solid #eef0f2;
    border-radius: 12px
}

    .miylov-stat strong {
        display: block;
        font-size: 1.35rem
    }

.miylov-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

    .miylov-actions button {
        border: 1px solid #e0e4e8;
        background: #fff;
        border-radius: 10px;
        padding: 9px 12px;
        cursor: pointer
    }

.miylov-empty {
    text-align: center;
    padding: 22px;
    color: #7b838e
}

.miylov-error {
    padding: 14px;
    border-radius: 12px;
    background: #fff4f4;
    border: 1px solid #ffd6d6;
    color: #a33
}

.miylov-calendar {
    display: grid;
    grid-template-columns: repeat(7,1fr);
    gap: 4px
}

    .miylov-calendar span {
        padding: 7px;
        text-align: center;
        border-radius: 8px;
        font-size: .82rem
    }

    .miylov-calendar .active {
        background: #eef2ff;
        font-weight: 700
    }

    .miylov-calendar .today {
        outline: 2px solid currentColor
    }




:root {
    --miylov-primary: #18b79f;
    --miylov-primary-dark: #109b87;
    --miylov-primary-soft: #e9faf6;
    --register-bg: #f5faf8;
    --register-text: #172522;
    --register-muted: #71817d;
    --card-border: rgba(20, 60, 53, .08);
    --card-shadow: 0 30px 80px rgba(19, 65, 57, .12), 0 8px 30px rgba(19, 65, 57, .06);
}

* {
    box-sizing: border-box;
}

.register-page {
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    background: radial-gradient( circle at 15% 15%, rgba(24, 183, 159, .09), transparent 30% ), radial-gradient( circle at 85% 80%, rgba(24, 183, 159, .07), transparent 30% ), var(--register-bg);
    color: var(--register-text);
}

.register-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(2px);
}

.register-orb-one {
    width: 420px;
    height: 420px;
    top: -240px;
    left: -180px;
    background: radial-gradient( circle, rgba(24, 183, 159, .16), transparent 70% );
}

.register-orb-two {
    width: 520px;
    height: 520px;
    right: -280px;
    bottom: -280px;
    background: radial-gradient( circle, rgba(24, 183, 159, .12), transparent 70% );
}

.register-grid {
    position: absolute;
    inset: 0;
    opacity: .25;
    background-image: linear-gradient( rgba(20, 80, 70, .035) 1px, transparent 1px ), linear-gradient( 90deg, rgba(20, 80, 70, .035) 1px, transparent 1px );
    background-size: 42px 42px;
    mask-image: linear-gradient( to bottom, black, transparent 80% );
}

.register-header {
    position: relative;
    z-index: 2;
    height: 82px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 52px;
}

.register-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--register-text);
    text-decoration: none;
}

.brand-symbol {
    width: 31px;
    height: 31px;
    border: 5px solid var(--miylov-primary);
    border-right-color: transparent;
    border-radius: 50%;
    position: relative;
}

    .brand-symbol span {
        position: absolute;
        width: 9px;
        height: 9px;
        right: -2px;
        top: 5px;
        border-radius: 50%;
        background: var(--miylov-primary);
    }

.brand-text {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.7px;
}

.register-header-action {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--register-muted);
}

.login-link {
    color: var(--miylov-primary-dark);
    text-decoration: none;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

    .login-link:hover {
        color: var(--miylov-primary);
    }

.register-main {
    position: relative;
    z-index: 1;
    min-height: calc(100vh - 140px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 35px 30px 45px;
}

.register-container {
    width: 100%;
    max-width: 1180px;
    display: grid;
    grid-template-columns: 1fr 500px;
    align-items: center;
    gap: 90px;
}

.register-intro {
    padding: 10px 0;
}

.intro-badge {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 13px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(24, 183, 159, .13);
    color: var(--miylov-primary-dark);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .2px;
    box-shadow: 0 5px 20px rgba(20, 80, 70, .04);
}

.badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--miylov-primary);
    box-shadow: 0 0 0 5px rgba(24, 183, 159, .10);
}

.register-intro h1 {
    margin: 22px 0 18px;
    max-width: 610px;
    font-size: clamp(44px, 5vw, 68px);
    line-height: 1.02;
    letter-spacing: -3px;
    font-weight: 850;
}

    .register-intro h1 span {
        color: var(--miylov-primary);
    }

.intro-description {
    max-width: 550px;
    margin: 0;
    color: var(--register-muted);
    font-size: 17px;
    line-height: 1.75;
}

.mascot-area {
    width: 260px;
    height: 170px;
    margin: 25px 0 8px;
    position: relative;
}

.mascot-glow {
    position: absolute;
    width: 145px;
    height: 145px;
    left: 58px;
    top: 2px;
    border-radius: 50%;
    background: radial-gradient( circle, rgba(24, 183, 159, .16), transparent 70% );
}

.mascot {
    position: absolute;
    left: 72px;
    top: 10px;
    width: 115px;
    height: 130px;
}

.mascot-head {
    position: absolute;
    width: 104px;
    height: 92px;
    left: 5px;
    top: 20px;
    border-radius: 48% 48% 44% 44%;
    background: #ffffff;
    border: 3px solid #dceee9;
    box-shadow: 0 16px 35px rgba(20, 80, 70, .12);
}

.ear {
    position: absolute;
    width: 31px;
    height: 45px;
    top: 0;
    border-radius: 50% 50% 45% 45%;
    background: #ffffff;
    border: 3px solid #dceee9;
}

.ear-left {
    left: 0;
    transform: rotate(-28deg);
}

.ear-right {
    right: 0;
    transform: rotate(28deg);
}

.eye {
    position: absolute;
    width: 8px;
    height: 10px;
    top: 37px;
    border-radius: 50%;
    background: #243d38;
}

.eye-left {
    left: 30px;
}

.eye-right {
    right: 30px;
}

.nose {
    position: absolute;
    width: 12px;
    height: 9px;
    left: 43px;
    top: 49px;
    border-radius: 50% 50% 55% 55%;
    background: #243d38;
}

.mouth {
    position: absolute;
    width: 22px;
    height: 13px;
    left: 39px;
    top: 57px;
    border-bottom: 2px solid #243d38;
    border-radius: 0 0 50% 50%;
}

    .mouth span {
        position: absolute;
        width: 8px;
        height: 5px;
        left: 7px;
        bottom: -1px;
        border-radius: 50%;
        background: #ff9d9d;
    }

.cheek {
    position: absolute;
    width: 10px;
    height: 6px;
    top: 53px;
    border-radius: 50%;
    background: rgba(255, 145, 145, .30);
}

.cheek-left {
    left: 15px;
}

.cheek-right {
    right: 15px;
}

.mascot-body {
    position: absolute;
    width: 62px;
    height: 42px;
    left: 26px;
    bottom: 0;
    border-radius: 50% 50% 30% 30%;
    background: var(--miylov-primary);
    box-shadow: 0 12px 25px rgba(24, 183, 159, .20);
}

.mascot-shadow {
    position: absolute;
    width: 115px;
    height: 16px;
    left: 68px;
    bottom: 4px;
    border-radius: 50%;
    background: rgba(20, 70, 60, .09);
    filter: blur(7px);
}

.benefits {
    display: flex;
    flex-direction: column;
    gap: 13px;
    max-width: 470px;
}

.benefit {
    display: flex;
    align-items: center;
    gap: 12px;
}

.benefit-icon {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: var(--miylov-primary-soft);
    color: var(--miylov-primary);
    font-size: 15px;
}

.benefit strong {
    display: block;
    font-size: 13px;
    font-weight: 800;
}

.benefit span {
    display: block;
    margin-top: 2px;
    color: var(--register-muted);
    font-size: 12px;
}

.register-card-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.register-card {
    width: 100%;
    padding: 34px;
    border-radius: 26px;
    background: rgba(255, 255, 255, .90);
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.register-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 26px;
}

.welcome-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    background: linear-gradient( 135deg, var(--miylov-primary-soft), #f2fffc );
    color: var(--miylov-primary);
    font-size: 21px;
}

.register-card-header h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 850;
    letter-spacing: -.7px;
}

.register-card-header p {
    margin: 4px 0 0;
    color: var(--register-muted);
    font-size: 12px;
    line-height: 1.5;
}

.register-form {
    display: flex;
    flex-direction: column;
    gap: 17px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

    .form-group label {
        font-size: 12px;
        font-weight: 800;
        color: #354842;
    }

.label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.password-hint {
    color: #9aa9a5;
    font-size: 10px;
    font-weight: 600;
}

.input-wrapper {
    position: relative;
}

    .input-wrapper > i {
        position: absolute;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
        color: #94a39f;
        font-size: 15px;
        pointer-events: none;
        z-index: 1;
    }

.form-control {
    width: 100%;
    height: 49px;
    padding: 0 44px 0 43px;
    border: 1px solid #e2ebe8;
    border-radius: 13px;
    outline: none;
    background: #fbfdfc;
    color: var(--register-text);
    font-size: 13px;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

    .form-control::placeholder {
        color: #aab5b2;
    }

    .form-control:focus {
        background: #ffffff;
        border-color: rgba(24, 183, 159, .55);
        box-shadow: 0 0 0 4px rgba(24, 183, 159, .09);
    }

.password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border: 0;
    background: transparent;
    color: #9aa9a5;
    cursor: pointer;
    border-radius: 8px;
}

    .password-toggle:hover {
        background: var(--miylov-primary-soft);
        color: var(--miylov-primary);
    }

.password-match {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--miylov-primary);
    font-size: 15px;
}

.terms-check {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    cursor: pointer;
    margin-top: 1px;
}

    .terms-check input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

.custom-checkbox {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    display: grid;
    place-items: center;
    border: 1px solid #d6e3df;
    border-radius: 5px;
    color: transparent;
    background: #fff;
    transition: .2s ease;
}

.terms-check:hover .custom-checkbox {
    border-color: var(--miylov-primary);
}

.terms-text {
    color: var(--register-muted);
    font-size: 11px;
    line-height: 1.55;
}

    .terms-text a {
        color: var(--miylov-primary-dark);
        font-weight: 700;
        text-decoration: none;
    }

        .terms-text a:hover {
            text-decoration: underline;
        }

.register-button {
    width: 100%;
    height: 51px;
    border: 0;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    background: linear-gradient( 135deg, var(--miylov-primary), var(--miylov-primary-dark) );
    color: white;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 12px 25px rgba(24, 183, 159, .22);
    transition: transform .2s ease, box-shadow .2s ease;
}

    .register-button:hover {
        transform: translateY(-1px);
        box-shadow: 0 16px 30px rgba(24, 183, 159, .28);
    }

    .register-button i {
        transition: transform .2s ease;
    }

    .register-button:hover i {
        transform: translateX(3px);
    }

.divider {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .divider span {
        flex: 1;
        height: 1px;
        background: #e8efed;
    }

    .divider em {
        color: #a3afac;
        font-size: 10px;
        font-style: normal;
    }

.google-button {
    width: 100%;
    height: 47px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid #e0e9e6;
    border-radius: 13px;
    background: #ffffff;
    color: #33453f;
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

    .google-button:hover {
        background: #fbfdfc;
        border-color: #cddbd6;
        transform: translateY(-1px);
    }

.google-icon {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    font-size: 15px;
    font-weight: 800;
    font-family: Arial, sans-serif;
    color: #4285f4;
}

.login-prompt {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding-top: 2px;
    color: var(--register-muted);
    font-size: 11px;
}

    .login-prompt a {
        color: var(--miylov-primary-dark);
        font-weight: 800;
        text-decoration: none;
    }

        .login-prompt a:hover {
            text-decoration: underline;
        }

.secure-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 14px;
    color: #8b9a96;
    font-size: 10px;
}

    .secure-note i {
        color: var(--miylov-primary);
        font-size: 12px;
    }

.register-footer {
    position: relative;
    z-index: 2;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: #91a09c;
    font-size: 10px;
}

    .register-footer a {
        color: inherit;
        text-decoration: none;
    }

        .register-footer a:hover {
            color: var(--miylov-primary-dark);
        }

.footer-dot {
    opacity: .5;
}

@@media (max-width: 950px) {

    .register-container {
        grid-template-columns: 1fr;
        max-width: 560px;
        gap: 35px;
    }

    .register-intro {
        text-align: center;
    }

    .intro-badge {
        margin: auto;
    }

    .register-intro h1 {
        font-size: 48px;
        letter-spacing: -2px;
    }

    .intro-description {
        margin: auto;
    }

    .mascot-area {
        margin-left: auto;
        margin-right: auto;
    }

    .benefits {
        margin: auto;
        text-align: left;
    }

    .register-main {
        padding-top: 20px;
    }
}

@@media (max-width: 600px) {

    .register-header {
        height: 72px;
        padding: 0 20px;
    }

    .register-header-action > span {
        display: none;
    }

    .register-main {
        padding: 25px 16px 35px;
    }

    .register-intro h1 {
        font-size: 40px;
        line-height: 1.05;
    }

    .intro-description {
        font-size: 14px;
    }

    .mascot-area {
        transform: scale(.9);
        margin-top: 12px;
        margin-bottom: 0;
    }

    .register-card {
        padding: 24px 20px;
        border-radius: 22px;
    }

    .register-card-header h2 {
        font-size: 21px;
    }

    .register-footer {
        padding: 0 15px;
        flex-wrap: wrap;
    }
}

@@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important;
    }
}

/* =========================================================
   05. PROFILE
   Profile.razor ile birlikte kullanılır.
   ========================================================= */

/* =========================================================
   MIYLOV - PROFILE PAGE
   Profile.razor ile birlikte kullanılır.
   Bu dosyayı wwwroot/css/profile.css içine koyabilirsiniz.
   ========================================================= */

.miylov-profile-page {
    --profile-primary: #12b8a6;
    --profile-primary-dark: #079b8d;
    --profile-text: #132238;
    --profile-muted: #6d7b8d;
    --profile-border: #e5ebef;
    --profile-background: #f6faf9;
    --profile-card: #ffffff;

    width: 100%;
    max-width: none;
    margin: 0;
    padding: 20px 22px 35px;
    box-sizing: border-box;
}

/* ---------- Header ---------- */

.profile-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
}

.profile-eyebrow {
    margin-bottom: 7px;
    color: var(--profile-primary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
}

.profile-page-header h1 {
    margin: 0;
    font-size: 31px;
    line-height: 1.15;
    font-weight: 750;
    letter-spacing: -.035em;
}

.profile-page-header p {
    margin: 7px 0 0;
    color: var(--profile-muted);
    font-size: 14px;
}

.profile-breadcrumb {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #98a4b3;
    font-size: 13px;
    white-space: nowrap;
}

.profile-breadcrumb i {
    font-size: 10px;
}

.profile-breadcrumb strong {
    color: #506074;
    font-weight: 650;
}

/* ---------- Profile summary ---------- */

.profile-summary-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 190px;
    padding: 22px 26px;
    border: 1px solid var(--profile-border);
    border-radius: 20px;
    background: var(--profile-card);
    box-shadow: 0 5px 22px rgba(27, 55, 70, .035);
}

.profile-summary-main {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 24px;
}

.profile-avatar-wrap {
    position: relative;
    flex: 0 0 auto;
}

.profile-avatar {
    width: 128px;
    height: 128px;
    overflow: hidden;
    border: 5px solid #fff;
    border-radius: 50%;
    background: linear-gradient(145deg, #d8f7f1, #edf8f7);
    box-shadow:
        0 0 0 1px #dce6e7,
        0 8px 24px rgba(21, 77, 83, .10);
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-fallback {
    display: none;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #078e82;
    font-size: 31px;
    font-weight: 800;
}

.avatar-camera {
    position: absolute;
    right: 1px;
    bottom: 2px;
    display: grid;
    width: 37px;
    height: 37px;
    place-items: center;
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--profile-primary);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 5px 14px rgba(18, 184, 166, .25);
    transition: transform .18s ease, background .18s ease;
}

.avatar-camera:hover {
    transform: translateY(-2px);
    background: var(--profile-primary-dark);
}

.profile-identity {
    min-width: 0;
}

.profile-name-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.profile-name-row h2 {
    margin: 0;
    font-size: 22px;
    line-height: 1.25;
    font-weight: 750;
    letter-spacing: -.025em;
}

.verified-badge {
    display: inline-grid;
    width: 18px;
    height: 18px;
    place-items: center;
    border-radius: 50%;
    background: #3186e9;
    color: #fff;
    font-size: 11px;
}

.premium-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 999px;
    background: #dff7ec;
    color: #159565;
    font-size: 12px;
    font-weight: 750;
}

.profile-username {
    margin-top: 3px;
    color: #7b8999;
    font-size: 13px;
}

.profile-bio {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 13px;
    color: #47566a;
    font-size: 14px;
}

.inline-edit {
    display: inline-grid;
    width: 24px;
    height: 24px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #7e8da0;
    cursor: pointer;
}

.inline-edit:hover {
    background: #f1f6f6;
    color: var(--profile-primary);
}

.profile-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 15px;
    color: #7a8796;
    font-size: 12px;
}

.profile-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.profile-meta i {
    color: #8292a4;
    font-size: 14px;
}

.profile-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(88px, 1fr));
    min-width: 430px;
    border-left: 1px solid #edf0f2;
}

.profile-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 105px;
    padding: 10px 14px;
    border-right: 1px solid #edf0f2;
    text-align: center;
}

.profile-stat:last-child {
    border-right: 0;
}

.profile-stat > i {
    margin-bottom: 7px;
    color: #657990;
    font-size: 18px;
}

.profile-stat strong {
    color: #152338;
    font-size: 18px;
    font-weight: 750;
}

.profile-stat span {
    margin-top: 3px;
    color: #8793a2;
    font-size: 10px;
    line-height: 1.25;
}

/* ---------- Premium ---------- */

.premium-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 69px;
    margin-top: 18px;
    padding: 11px 16px;
    border: 1px solid #cceee8;
    border-radius: 14px;
    background: linear-gradient(90deg, #e9fbf8 0%, #f4fcfb 100%);
}

.premium-icon {
    display: grid;
    width: 43px;
    height: 43px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 12px;
    background: #fff;
    color: #efaa25;
    font-size: 20px;
    box-shadow: 0 3px 10px rgba(50, 90, 90, .06);
}

.premium-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.premium-content strong {
    font-size: 14px;
    font-weight: 750;
}

.premium-content span {
    color: #6e8086;
    font-size: 12px;
}

.premium-action {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 42px;
    padding: 0 16px;
    border: 1px solid #b9ded8;
    border-radius: 10px;
    background: rgba(255,255,255,.6);
    color: #087a71;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: .18s ease;
}

.premium-action:hover {
    border-color: #8accc3;
    background: #fff;
}

/* ---------- Quick access ---------- */

.quick-access-section {
    margin-top: 22px;
}

.section-heading-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 13px;
}

.section-heading-row h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 750;
    letter-spacing: -.025em;
}

.section-heading-row p {
    margin: 4px 0 0;
    color: #788697;
    font-size: 13px;
}

.profile-search {
    display: flex;
    align-items: center;
    width: 300px;
    height: 39px;
    padding: 0 12px;
    border: 1px solid #dfe6ea;
    border-radius: 10px;
    background: #fff;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.profile-search:focus-within {
    border-color: #9dded7;
    box-shadow: 0 0 0 3px rgba(18,184,166,.08);
}

.profile-search i {
    color: #8391a1;
    font-size: 14px;
}

.profile-search input {
    width: 100%;
    min-width: 0;
    padding: 0 0 0 9px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #314158;
    font-size: 12px;
}

.profile-search input::placeholder {
    color: #9aa6b4;
}

/* ---------- Profile link cards ---------- */

.profile-links-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.profile-link-card {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 82px;
    gap: 12px;
    padding: 13px 13px;
    overflow: hidden;
    border: 1px solid #e5eaee;
    border-radius: 12px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(35, 56, 68, .018);
    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.profile-link-card::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 2px;
    background: transparent;
    transition: background .18s ease;
}

.profile-link-card:hover {
    transform: translateY(-2px);
    border-color: #d5e0e3;
    box-shadow: 0 8px 22px rgba(35, 56, 68, .07);
}

.profile-link-card:hover::after {
    background: var(--profile-primary);
}

.profile-link-icon {
    display: grid;
    width: 45px;
    height: 45px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 12px;
    font-size: 19px;
}

.profile-link-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.profile-link-content strong {
    overflow: hidden;
    color: #1c2a3d;
    font-size: 13px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-link-content small {
    display: -webkit-box;
    margin-top: 4px;
    overflow: hidden;
    color: #7d8b9a;
    font-size: 10.5px;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.profile-link-arrow {
    flex: 0 0 auto;
    color: #8997a7;
    font-size: 13px;
    transition: transform .18s ease, color .18s ease;
}

.profile-link-card:hover .profile-link-arrow {
    transform: translateX(3px);
    color: var(--profile-primary);
}

/* ---------- Icon themes ---------- */

.theme-blue .profile-link-icon {
    background: #e8f2ff;
    color: #438de5;
}

.theme-green .profile-link-icon {
    background: #e3f8f0;
    color: #18a47e;
}

.theme-red .profile-link-icon {
    background: #fff0f0;
    color: #e86c77;
}

.theme-purple .profile-link-icon {
    background: #f2eaff;
    color: #8c63df;
}

.theme-orange .profile-link-icon {
    background: #fff3df;
    color: #e9a133;
}

/* ---------- AI Assistant ---------- */

.profile-ai-card {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 61px;
    margin-top: 12px;
    padding: 10px 14px;
    border: 1px solid #dfeceb;
    border-radius: 13px;
    background: linear-gradient(90deg, #f4fcfb, #fff);
}

.profile-ai-icon {
    display: grid;
    width: 39px;
    height: 39px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 11px;
    background: #dff7f2;
    color: #0b9186;
    font-size: 18px;
}

.profile-ai-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.profile-ai-content strong {
    font-size: 13px;
    font-weight: 750;
}

.profile-ai-content span {
    color: #7a8894;
    font-size: 11px;
}

.profile-ai-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 39px;
    padding: 0 15px;
    border: 1px solid #bce3dd;
    border-radius: 9px;
    color: #087e75;
    background: #fff;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    transition: .18s ease;
}

.profile-ai-button:hover {
    border-color: #8bcec5;
    background: #f5fffd;
}

/* ---------- Responsive ---------- */

@media (max-width: 1200px) {
    .profile-links-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .profile-summary-card {
        align-items: flex-start;
        flex-direction: column;
        gap: 22px;
    }

    .profile-stats {
        width: 100%;
        min-width: 0;
        border-left: 0;
        border-top: 1px solid #edf0f2;
    }
}

@media (max-width: 900px) {
    .miylov-profile-page {
        padding: 22px 20px 38px;
    }

    .profile-links-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .profile-page-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .profile-breadcrumb {
        display: none;
    }

    .profile-search {
        width: 250px;
    }
}

@media (max-width: 650px) {
    .miylov-profile-page {
        padding: 18px 14px 30px;
    }

    .profile-summary-card {
        padding: 18px;
        border-radius: 16px;
    }

    .profile-summary-main {
        align-items: flex-start;
        flex-direction: column;
        gap: 16px;
    }

    .profile-avatar {
        width: 104px;
        height: 104px;
    }

    .profile-meta {
        flex-direction: column;
        gap: 7px;
    }

    .profile-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .profile-stat:nth-child(2) {
        border-right: 0;
    }

    .profile-stat:nth-child(-n+2) {
        border-bottom: 1px solid #edf0f2;
    }

    .premium-banner {
        align-items: flex-start;
        flex-wrap: wrap;
        padding: 13px;
    }

    .premium-content {
        min-width: calc(100% - 62px);
    }

    .premium-action {
        width: 100%;
        justify-content: center;
    }

    .section-heading-row {
        align-items: stretch;
        flex-direction: column;
    }

    .profile-search {
        width: 100%;
    }

    .profile-links-grid {
        grid-template-columns: 1fr;
    }

    .profile-ai-card {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .profile-ai-content {
        min-width: calc(100% - 54px);
    }

    .profile-ai-button {
        width: 100%;
        justify-content: center;
    }
}
\n\n/* =========================================================\n   PROFILE PAGE - FULL WIDTH OVERRIDES\n   Sayfayı MainLayout içindeki kullanılabilir alanın tamamına yayar.\n   ========================================================= */\n\n.miylov-profile-page {\n    width: 100%;\n    max-width: none !important;\n    margin: 0 !important;\n    padding: 12px 14px 24px !important;\n    box-sizing: border-box;\n}\n\n.miylov-profile-page .profile-summary-card,\n.miylov-profile-page .premium-banner,\n.miylov-profile-page .quick-access-section {\n    width: 100%;\n    max-width: none;\n}\n\n.miylov-profile-page .profile-links-grid {\n    width: 100%;\n    grid-template-columns: repeat(4, minmax(0, 1fr));\n    gap: 10px;\n}\n\n.miylov-profile-page .profile-link-card {\n    min-width: 0;\n}\n\n@media (min-width: 1500px) {\n    .miylov-profile-page {\n        padding-left: 16px !important;\n        padding-right: 16px !important;\n    }\n\n    .miylov-profile-page .profile-links-grid {\n        grid-template-columns: repeat(4, minmax(0, 1fr));\n        gap: 10px;\n    }\n}\n\n@media (max-width: 1200px) {\n    .miylov-profile-page .profile-links-grid {\n        grid-template-columns: repeat(3, minmax(0, 1fr));\n    }\n}\n\n@media (max-width: 900px) {\n    .miylov-profile-page {\n        padding-left: 10px !important;\n        padding-right: 10px !important;\n    }\n\n    .miylov-profile-page .profile-links-grid {\n        grid-template-columns: repeat(2, minmax(0, 1fr));\n    }\n}\n\n@media (max-width: 650px) {\n    .miylov-profile-page {\n        padding-left: 6px !important;\n        padding-right: 6px !important;\n    }\n\n    .miylov-profile-page .profile-links-grid {\n        grid-template-columns: 1fr;\n    }\n}\n

/* =========================================================
   REMINDER PAGE
   Scoped to .reminder-page to prevent collisions with dashboard
   reminder widgets and shared components.
   ========================================================= */

.reminder-page {
    min-height: calc(100vh - var(--topbar-height));
    padding: 0 0 42px;
    background: var(--miylov-bg, #f5f6f9);
    color: var(--miylov-text, #243447);
}.reminder-page-head {
    width: min(calc(100% - 48px), 1380px);
    margin: 28px auto 22px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}.reminder-page .reminder-eyebrow,
.reminder-page .detail-kicker {
    display: block;
    color: var(--miylov-primary-dark, #109a86);
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .14em;
}.reminder-page-head h1 {
    margin: 5px 0 5px;
    font-size: clamp(28px, 3vw, 39px);
    letter-spacing: -.045em;
}.reminder-page-head p {
    margin: 0;
    color: var(--miylov-muted, #71807d);
    font-size: .84rem;
}.reminder-page .reminder-primary,
.reminder-page .reminder-secondary,
.reminder-page .reminder-danger {
    border: 0;
    border-radius: 9px;
    min-height: 40px;
    padding: 10px 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: .75rem;
    font-weight: 700;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}.reminder-page .reminder-primary {
    color: #fff;
    background: var(--miylov-primary, #18b79f);
    box-shadow: 0 7px 18px rgba(24,183,159,.18);
}.reminder-page .reminder-primary:hover { transform: translateY(-1px); background: var(--miylov-primary-dark, #109a86); }.reminder-page .reminder-primary:disabled { opacity: .55; transform: none; box-shadow: none; }.reminder-page .reminder-secondary {
    color: #526173;
    background: #fff;
    border: 1px solid #e2e8e6;
}.reminder-page .reminder-danger {
    color: #c64e5a;
    background: #fff0f1;
}.reminder-page .reminder-summary-grid {
    width: min(calc(100% - 48px), 1380px);
    margin: 0 auto 18px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}.reminder-page .reminder-summary {
    min-height: 82px;
    padding: 14px;
    border: 1px solid #e7eeec;
    border-radius: 11px;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    color: var(--miylov-ink, #172322);
    box-shadow: 0 4px 15px rgba(28,40,57,.035);
}.reminder-page .reminder-summary:hover { border-color: #cfe1dd; }.reminder-page .reminder-summary.selected {
    border-color: #9bded3;
    background: #f0fbf8;
    box-shadow: 0 6px 18px rgba(24,183,159,.08);
}.reminder-page .reminder-summary > span:last-child { display: flex; flex-direction: column; gap: 3px; }.reminder-page .reminder-summary small { color: #8995a0; font-size: .65rem; }.reminder-page .reminder-summary strong { font-size: 1.22rem; line-height: 1; }.reminder-page .summary-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}.reminder-page .summary-icon.teal { color: #139b88; background: #e5f8f4; }.reminder-page .summary-icon.blue { color: #3678d8; background: #eaf1fd; }.reminder-page .summary-icon.orange { color: #b57b18; background: #fff5df; }.reminder-page .summary-icon.green { color: #168c72; background: #e7f7ef; }.reminder-page .summary-icon.purple { color: #7961bc; background: #f1edfb; }.reminder-page .reminder-workspace {
    width: min(calc(100% - 48px), 1380px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(390px, .78fr);
    gap: 18px;
    align-items: start;
}.reminder-page .reminder-list-panel,
.reminder-page .reminder-detail-panel {
    background: #fff;
    border: 1px solid #e7eeec;
    border-radius: 12px;
    box-shadow: 0 6px 22px rgba(28,40,57,.045);
    overflow: hidden;
}.reminder-page .reminder-toolbar {
    padding: 14px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 145px 145px;
    gap: 8px;
    border-bottom: 1px solid #edf1ef;
}.reminder-page .reminder-search-box {
    height: 38px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 11px;
    border: 1px solid #dfe7e4;
    border-radius: 8px;
    color: #89959f;
    background: #fbfcfc;
}.reminder-page .reminder-search-box input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: #344454;
    font-size: .73rem;
}.reminder-page .reminder-search-box button {
    border: 0;
    background: transparent;
    color: #8c97a2;
}.reminder-page .reminder-toolbar select,
.reminder-page .detail-form input,
.reminder-page .detail-form select,
.reminder-page .reminder-modal input,
.reminder-page .reminder-modal select {
    min-width: 0;
    width: 100%;
    height: 38px;
    padding: 0 10px;
    border: 1px solid #dfe7e4;
    border-radius: 8px;
    outline: 0;
    background: #fff;
    color: #4b5b6c;
    font-size: .71rem;
}.reminder-page .reminder-toolbar select:focus,
.reminder-page .detail-form input:focus,
.reminder-page .detail-form select:focus,
.reminder-page .reminder-modal input:focus,
.reminder-page .reminder-modal select:focus {
    border-color: #91d9cf;
    box-shadow: 0 0 0 .15rem rgba(24,183,159,.08);
}.reminder-page .reminder-list-head {
    min-height: 38px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #99a2ac;
    font-size: .64rem;
}.reminder-page .reminder-list-head button {
    border: 0;
    background: transparent;
    color: var(--miylov-primary-dark, #109a86);
    font-size: .65rem;
    font-weight: 700;
}.reminder-page .reminder-list { border-top: 1px solid #f0f3f2; }.reminder-page .reminder-row {
    width: 100%;
    min-height: 76px;
    padding: 9px 16px;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 82px 78px 12px;
    gap: 11px;
    align-items: center;
    border: 0;
    border-bottom: 1px solid #f0f3f2;
    background: #fff;
    color: #344454;
    text-align: left;
    transition: background .15s ease, box-shadow .15s ease;
}.reminder-page .reminder-row:last-child { border-bottom: 0; }.reminder-page .reminder-row:hover { background: #fbfdfc; }.reminder-page .reminder-row.selected {
    background: #f0fbf8;
    box-shadow: inset 3px 0 0 var(--miylov-primary, #18b79f);
}.reminder-page .reminder-type-icon,
.reminder-page .detail-icon {
    display: grid;
    place-items: center;
    border-radius: 11px;
}.reminder-page .reminder-type-icon {
    width: 40px;
    height: 40px;
}.reminder-page .type-teal { color: #139c88; background: #e6f8f4; }.reminder-page .type-blue { color: #3577d4; background: #eaf1fd; }.reminder-page .type-purple { color: #785fb9; background: #f0ebfb; }.reminder-page .type-coral { color: #d16c5a; background: #fff0ec; }.reminder-page .type-orange { color: #b37b17; background: #fff5df; }.reminder-page .type-pink { color: #c85b85; background: #fcecf3; }.reminder-page .type-gray { color: #697888; background: #eef1f3; }.reminder-page .reminder-row-copy { min-width: 0; }.reminder-page .reminder-row-copy strong,
.reminder-page .reminder-row-copy small,
.reminder-page .reminder-row-date strong,
.reminder-page .reminder-row-date small { display: block; }.reminder-page .reminder-row-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .76rem; }.reminder-page .reminder-row-copy small { margin-top: 3px; color: #9aa4ad; font-size: .62rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.reminder-page .reminder-row-date strong { font-size: .66rem; }.reminder-page .reminder-row-date small { margin-top: 3px; color: #99a3ad; font-size: .61rem; }.reminder-page .reminder-chevron { color: #aab3ba; font-size: .66rem; }.reminder-page .reminder-status {
    width: max-content;
    padding: 5px 8px;
    border-radius: 999px;
    font-size: .58rem;
    font-weight: 700;
    white-space: nowrap;
}.reminder-page .status-active { color: #128d79; background: #e8faf5; }.reminder-page .status-pending { color: #a67613; background: #fff6df; }.reminder-page .status-completed { color: #687482; background: #eef1f4; }.reminder-page .reminder-empty {
    min-height: 280px;
    padding: 35px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    text-align: center;
    color: #97a1aa;
}.reminder-page .reminder-empty i { font-size: 2rem; color: #b7c0c7; }.reminder-page .reminder-empty strong { color: #5c6a78; font-size: .78rem; }.reminder-page .reminder-empty span { font-size: .68rem; }.reminder-page .reminder-detail-panel { padding: 22px; }.reminder-page .detail-header { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }.reminder-page .detail-heading { display: flex; align-items: center; gap: 12px; min-width: 0; }.reminder-page .detail-icon { width: 52px; height: 52px; flex: 0 0 auto; font-size: 1.05rem; }.reminder-page .detail-heading h2 { margin: 3px 0 3px; font-size: 1.1rem; letter-spacing: -.02em; }.reminder-page .detail-heading p { margin: 0; color: #89949e; font-size: .66rem; }.reminder-page .detail-tabs {
    margin: 20px 0 18px;
    display: flex;
    gap: 22px;
    border-bottom: 1px solid #edf1ef;
}.reminder-page .detail-tabs button {
    position: relative;
    padding: 0 0 10px;
    border: 0;
    background: transparent;
    color: #96a0a8;
    font-size: .67rem;
    font-weight: 700;
}.reminder-page .detail-tabs button.active { color: var(--miylov-primary-dark, #109a86); }.reminder-page .detail-tabs button.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--miylov-primary, #18b79f); }.reminder-page .detail-form { display: grid; gap: 12px; }.reminder-page .detail-form label { display: grid; gap: 6px; color: #566574; font-size: .67rem; font-weight: 650; }.reminder-page .detail-form input,
.reminder-page .detail-form select { height: 39px; }.reminder-page .detail-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.reminder-page .detail-two-col .form-control { height: 39px; border-color: #dfe7e4; font-size: .71rem; }.reminder-page .detail-info-card {
    padding: 11px;
    display: flex;
    gap: 9px;
    border: 1px solid #e3f0ed;
    border-radius: 9px;
    background: #f7fcfb;
}.reminder-page .detail-info-icon { color: var(--miylov-primary-dark, #109a86); font-size: .85rem; }.reminder-page .detail-info-card strong,
.reminder-page .detail-info-card span { display: block; }.reminder-page .detail-info-card strong { color: #51636c; font-size: .67rem; }.reminder-page .detail-info-card span { margin-top: 3px; color: #8a969f; font-size: .6rem; line-height: 1.45; }.reminder-page .detail-actions {
    margin-top: 5px;
    padding-top: 13px;
    border-top: 1px solid #edf1ef;
    display: flex;
    justify-content: space-between;
    gap: 8px;
}.reminder-page .reminder-detail-empty {
    min-height: 430px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 30px;
}.reminder-page .detail-empty-icon {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    color: var(--miylov-primary-dark, #109a86);
    background: #e8f8f5;
    font-size: 1.4rem;
}.reminder-page .reminder-detail-empty h2 { margin: 15px 0 6px; font-size: 1rem; }.reminder-page .reminder-detail-empty p { max-width: 300px; margin: 0 0 15px; color: #929da6; font-size: .68rem; line-height: 1.55; }.reminder-page .reminder-modal-backdrop {
    position: fixed;
    z-index: 2000;
    inset: 0;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(25,38,49,.32);
    backdrop-filter: blur(3px);
}.reminder-page .reminder-modal {
    width: min(510px, 100%);
    max-height: calc(100vh - 40px);
    overflow: auto;
    padding: 22px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #e4ebe9;
    box-shadow: 0 22px 65px rgba(28,40,57,.18);
}.reminder-page .modal-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; margin-bottom: 18px; }.reminder-page .modal-heading h2 { margin: 4px 0 3px; font-size: 1.1rem; }.reminder-page .modal-heading p { margin: 0; color: #929ca4; font-size: .67rem; }.reminder-page .modal-close { width: 32px; height: 32px; border: 0; border-radius: 8px; background: #f3f6f5; color: #697680; }.reminder-page .modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }

@media (max-width: 1200px) {.reminder-page .reminder-summary-grid { grid-template-columns: repeat(3, 1fr); }.reminder-page .reminder-workspace { grid-template-columns: 1fr; }
}

@media (max-width: 800px) {.reminder-page { padding: 0 0 34px; }
    .reminder-page-head,
    .reminder-summary-grid,
    .reminder-workspace { width: calc(100% - 30px); }.reminder-page-head { align-items: flex-start; flex-direction: column; }.reminder-page .reminder-summary-grid { grid-template-columns: repeat(2, 1fr); }.reminder-page .reminder-toolbar { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {.reminder-page .reminder-summary-grid { grid-template-columns: 1fr; }.reminder-page .reminder-row { grid-template-columns: 40px minmax(0,1fr) 12px; }.reminder-page .reminder-row-date,
.reminder-page .reminder-status { display: none; }.reminder-page .detail-two-col { grid-template-columns: 1fr; }.reminder-page .detail-actions { flex-direction: column-reverse; }.reminder-page .detail-actions button { width: 100%; }
}

/* =========================================================
   SETTINGS PAGE
   Scoped to .miylov-settings-page to keep settings styles isolated
   from shared buttons, forms, modals and panels.
   ========================================================= */

.miylov-settings-page /* Miylov - Settings page
   Scoped to .miylov-settings-page so it can coexist with the rest of the app. */

.miylov-settings-page {
    --settings-primary: #2f6df6;
    --settings-primary-soft: #edf4ff;
    --settings-text: #18233b;
    --settings-muted: #667085;
    --settings-border: #e5eaf2;
    --settings-bg: #f7f9fc;
    --settings-surface: #ffffff;
    --settings-danger: #ef4444;
    --settings-success: #16a36b;

    min-height: 100%;
    background: var(--settings-bg);
    color: var(--settings-text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}.miylov-settings-page *,
.miylov-settings-page *::before,
.miylov-settings-page *::after {
    box-sizing: border-box;
}.miylov-settings-page .settings-shell {
    width: min(1500px, calc(100% - 48px));
    margin: 0 auto;
    padding: 42px 0 56px;
}.miylov-settings-page .settings-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 28px;
}.miylov-settings-page .settings-heading {
    display: flex;
    align-items: center;
    gap: 20px;
}.miylov-settings-page .settings-heading-icon {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    display: grid;
    place-items: center;
    color: #8ca6d7;
}.miylov-settings-page .settings-heading-icon svg {
    width: 62px;
    height: 62px;
    stroke: currentColor;
    stroke-width: 1.35;
    stroke-linecap: round;
    stroke-linejoin: round;
}.miylov-settings-page .settings-heading h1 {
    margin: 0 0 4px;
    font-size: clamp(30px, 3vw, 40px);
    line-height: 1.05;
    letter-spacing: -1.1px;
    font-weight: 750;
}.miylov-settings-page .settings-heading p {
    margin: 0;
    color: var(--settings-muted);
    font-size: 16px;
}.miylov-settings-page .settings-header-quote {
    max-width: 360px;
    margin-top: 18px;
    color: #56627b;
    font-size: 14px;
    line-height: 1.5;
    text-align: right;
}.miylov-settings-page .settings-layout {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 20px;
    align-items: stretch;
}.miylov-settings-page .settings-sidebar {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}.miylov-settings-page .settings-nav {
    background: var(--settings-surface);
    border: 1px solid var(--settings-border);
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 5px 22px rgba(35, 55, 90, 0.035);
}.miylov-settings-page .settings-nav-group-title {
    padding: 10px 12px 6px;
    color: #98a2b3;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}.miylov-settings-page .settings-nav-item {
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 13px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #27344e;
    padding: 0 13px;
    font: inherit;
    font-size: 15px;
    text-align: left;
    cursor: pointer;
    transition: background .16s ease, color .16s ease, transform .16s ease;
}.miylov-settings-page .settings-nav-item:hover {
    background: #f5f7fb;
}.miylov-settings-page .settings-nav-item:active {
    transform: translateY(1px);
}.miylov-settings-page .settings-nav-item.active {
    color: var(--settings-primary);
    background: var(--settings-primary-soft);
    font-weight: 650;
}.miylov-settings-page .settings-nav-item:last-child {
    color: #ef4444;
}.miylov-settings-page .settings-nav-icon {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    display: grid;
    place-items: center;
}.miylov-settings-page .settings-nav-icon svg {
    width: 21px;
    height: 21px;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
}.miylov-settings-page .settings-nav-divider {
    height: 1px;
    margin: 10px 10px;
    background: var(--settings-border);
}.miylov-settings-page .premium-card {
    border: 1px solid #eadcf8;
    border-radius: 12px;
    padding: 18px;
    background: linear-gradient(135deg, #fffdfb 0%, #f8edff 100%);
    box-shadow: 0 5px 22px rgba(83, 45, 118, 0.04);
}.miylov-settings-page .premium-card-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    margin-bottom: 9px;
    color: #f59e0b;
}.miylov-settings-page .premium-card-icon svg {
    width: 29px;
    height: 29px;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}.miylov-settings-page .premium-card strong {
    display: block;
    margin-bottom: 3px;
    font-size: 14px;
}.miylov-settings-page .premium-card span {
    display: block;
    color: #7b8495;
    font-size: 12px;
}.miylov-settings-page .premium-button {
    width: 100%;
    margin-top: 14px;
    min-height: 38px;
    border: 1px solid #ded8e9;
    border-radius: 8px;
    background: #fff;
    color: #26334e;
    font: inherit;
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
    transition: border-color .16s ease, box-shadow .16s ease;
}.miylov-settings-page .premium-button:hover {
    border-color: #c9bfd8;
    box-shadow: 0 4px 12px rgba(42, 35, 55, .06);
}.miylov-settings-page .settings-content {
    min-width: 0;
}.miylov-settings-page .settings-panel {
    min-height: 100%;
    border: 1px solid var(--settings-border);
    border-radius: 12px;
    background: var(--settings-surface);
    padding: 28px 30px 30px;
    box-shadow: 0 5px 22px rgba(35, 55, 90, 0.035);
}.miylov-settings-page .panel-heading {
    margin-bottom: 24px;
}.miylov-settings-page .panel-heading h2 {
    margin: 0 0 5px;
    font-size: 20px;
    letter-spacing: -.3px;
}.miylov-settings-page .panel-heading p {
    margin: 0;
    color: var(--settings-muted);
    font-size: 14px;
    line-height: 1.55;
}.miylov-settings-page .profile-photo-row {
    display: flex;
    align-items: center;
    gap: 20px;
}.miylov-settings-page .profile-avatar {
    position: relative;
    width: 112px;
    height: 112px;
    flex: 0 0 112px;
    border-radius: 50%;
    overflow: visible;
}.miylov-settings-page .avatar-placeholder {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(145deg, #d9e7fb, #a9bdd9);
    color: #314766;
    font-size: 29px;
    font-weight: 750;
    letter-spacing: -1px;
    border: 4px solid #fff;
    box-shadow: 0 3px 14px rgba(48, 72, 105, .13);
}.miylov-settings-page .avatar-camera {
    position: absolute;
    right: -1px;
    bottom: 2px;
    width: 33px;
    height: 33px;
    display: grid;
    place-items: center;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #27344e;
    color: #fff;
    cursor: pointer;
}.miylov-settings-page .avatar-camera svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}.miylov-settings-page .profile-photo-copy h3 {
    margin: 0 0 5px;
    font-size: 15px;
}.miylov-settings-page .profile-photo-copy p {
    margin: 0 0 13px;
    color: var(--settings-muted);
    font-size: 13px;
}.miylov-settings-page .profile-photo-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}.miylov-settings-page .form-divider {
    height: 1px;
    margin: 26px 0 22px;
    background: var(--settings-border);
}.miylov-settings-page .form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 22px;
    row-gap: 18px;
}.miylov-settings-page .form-field {
    min-width: 0;
}.miylov-settings-page .form-field-full {
    grid-column: 1 / -1;
}.miylov-settings-page .form-field label {
    display: block;
    margin-bottom: 7px;
    color: #293650;
    font-size: 13px;
    font-weight: 650;
}.miylov-settings-page .form-field input,
.miylov-settings-page .form-field select,
.miylov-settings-page .form-field textarea {
    width: 100%;
    border: 1px solid #dce2eb;
    border-radius: 8px;
    outline: 0;
    background: #fff;
    color: #26334d;
    font: inherit;
    font-size: 14px;
    transition: border-color .16s ease, box-shadow .16s ease;
}.miylov-settings-page .form-field input,
.miylov-settings-page .form-field select {
    height: 44px;
    padding: 0 13px;
}.miylov-settings-page .form-field textarea {
    min-height: 96px;
    padding: 12px 13px 26px;
    resize: vertical;
    line-height: 1.5;
}.miylov-settings-page .form-field input:focus,
.miylov-settings-page .form-field select:focus,
.miylov-settings-page .form-field textarea:focus {
    border-color: #91b2f7;
    box-shadow: 0 0 0 3px rgba(47, 109, 246, .10);
}.miylov-settings-page .form-field small {
    display: block;
    margin-top: 6px;
    color: #8a94a6;
    font-size: 11px;
}.miylov-settings-page .input-with-status {
    position: relative;
}.miylov-settings-page .input-with-status input {
    padding-right: 112px;
}.miylov-settings-page .verified-badge {
    position: absolute;
    top: 50%;
    right: 9px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transform: translateY(-50%);
    padding: 5px 7px;
    border-radius: 6px;
    background: #e9f8f1;
    color: var(--settings-success);
    font-size: 11px;
    font-weight: 650;
}.miylov-settings-page .verified-badge svg {
    width: 13px;
    height: 13px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}.miylov-settings-page .phone-input {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
}.miylov-settings-page .phone-input .country-code {
    min-width: 91px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid #dce2eb;
    border-right: 0;
    border-radius: 8px 0 0 8px;
    background: #f9fafc;
    color: #4e5b72;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}.miylov-settings-page .phone-input input {
    border-radius: 0 8px 8px 0;
}.miylov-settings-page .input-icon,
.miylov-settings-page .select-wrap {
    position: relative;
}.miylov-settings-page .input-icon svg {
    position: absolute;
    top: 50%;
    right: 13px;
    width: 17px;
    height: 17px;
    transform: translateY(-50%);
    pointer-events: none;
    stroke: #738097;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
}.miylov-settings-page .input-icon input {
    padding-right: 42px;
}.miylov-settings-page .select-wrap::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 14px;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid #69768d;
    border-bottom: 1.5px solid #69768d;
    transform: translateY(-65%) rotate(45deg);
    pointer-events: none;
}.miylov-settings-page .select-wrap select {
    appearance: none;
    padding-right: 38px;
    cursor: pointer;
}.miylov-settings-page .textarea-wrap {
    position: relative;
}.miylov-settings-page .textarea-wrap > span {
    position: absolute;
    right: 12px;
    bottom: 8px;
    color: #8b95a6;
    font-size: 11px;
}.miylov-settings-page .panel-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 15px;
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px solid var(--settings-border);
}.miylov-settings-page .save-message {
    color: var(--settings-success);
    font-size: 13px;
    font-weight: 600;
}.miylov-settings-page .btn {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
    border-radius: 8px;
    font: inherit;
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}.miylov-settings-page .btn:active {
    transform: translateY(1px);
}.miylov-settings-page .btn-primary {
    border: 1px solid #9fc0ff;
    background: #f3f7ff;
    color: #2161d9;
}.miylov-settings-page .btn-primary:hover {
    background: #eaf2ff;
}.miylov-settings-page .btn-secondary {
    border: 1px solid #dce2eb;
    background: #fff;
    color: #4d5a70;
}.miylov-settings-page .btn-secondary:hover {
    background: #f8f9fb;
}.miylov-settings-page .btn-save {
    min-width: 205px;
    border: 1px solid var(--settings-primary);
    background: var(--settings-primary);
    color: #fff;
    box-shadow: 0 5px 14px rgba(47, 109, 246, .18);
}.miylov-settings-page .btn-save:hover {
    background: #245edb;
    box-shadow: 0 7px 18px rgba(47, 109, 246, .23);
}.miylov-settings-page .btn-save svg {
    width: 17px;
    height: 17px;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
}.miylov-settings-page .settings-placeholder {
    min-height: 560px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}.miylov-settings-page .placeholder-icon {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    margin-bottom: 18px;
    border-radius: 18px;
    background: var(--settings-primary-soft);
    color: var(--settings-primary);
}.miylov-settings-page .placeholder-icon svg {
    width: 34px;
    height: 34px;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}.miylov-settings-page .settings-placeholder h2 {
    margin: 0 0 7px;
    font-size: 23px;
}.miylov-settings-page .settings-placeholder p {
    margin: 0 0 20px;
    color: var(--settings-muted);
}

@media (max-width: 1100px) {.miylov-settings-page .settings-layout {
        grid-template-columns: 250px minmax(0, 1fr);
    }.miylov-settings-page .settings-shell {
        width: min(100% - 32px, 1500px);
    }.miylov-settings-page .settings-panel {
        padding: 24px;
    }.miylov-settings-page .settings-header-quote {
        display: none;
    }
}

@media (max-width: 820px) {.miylov-settings-page .settings-shell {
        width: min(100% - 24px, 720px);
        padding-top: 26px;
    }.miylov-settings-page .settings-header {
        margin-bottom: 20px;
    }.miylov-settings-page .settings-heading {
        gap: 13px;
    }.miylov-settings-page .settings-heading-icon {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
    }.miylov-settings-page .settings-heading-icon svg {
        width: 47px;
        height: 47px;
    }.miylov-settings-page .settings-heading h1 {
        font-size: 30px;
    }.miylov-settings-page .settings-layout {
        grid-template-columns: 1fr;
    }.miylov-settings-page .settings-nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px;
    }.miylov-settings-page .settings-nav-divider,
.miylov-settings-page .settings-nav-group-title {
        display: none;
    }.miylov-settings-page .settings-nav-item {
        min-height: 44px;
    }.miylov-settings-page .premium-card {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        column-gap: 10px;
    }.miylov-settings-page .premium-card-icon {
        grid-row: span 2;
        margin: 0;
    }.miylov-settings-page .premium-button {
        grid-column: 1 / -1;
    }
}

@media (max-width: 620px) {.miylov-settings-page .settings-shell {
        width: calc(100% - 20px);
        padding: 20px 0 32px;
    }.miylov-settings-page .settings-heading h1 {
        font-size: 26px;
    }.miylov-settings-page .settings-heading p {
        font-size: 13px;
    }.miylov-settings-page .settings-layout {
        gap: 12px;
    }.miylov-settings-page .settings-nav {
        grid-template-columns: 1fr;
    }.miylov-settings-page .settings-panel {
        padding: 20px 16px;
        border-radius: 10px;
    }.miylov-settings-page .profile-photo-row {
        align-items: flex-start;
    }.miylov-settings-page .profile-avatar {
        width: 86px;
        height: 86px;
        flex-basis: 86px;
    }.miylov-settings-page .avatar-placeholder {
        font-size: 23px;
    }.miylov-settings-page .profile-photo-copy p {
        line-height: 1.45;
    }.miylov-settings-page .form-grid {
        grid-template-columns: 1fr;
        row-gap: 16px;
    }.miylov-settings-page .form-field-full {
        grid-column: auto;
    }.miylov-settings-page .panel-footer {
        flex-direction: column-reverse;
        align-items: stretch;
    }.miylov-settings-page .save-message {
        text-align: center;
    }.miylov-settings-page .btn-save {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {.miylov-settings-page *,
.miylov-settings-page *::before,
.miylov-settings-page *::after {
        scroll-behavior: auto !important;
        transition: none !important;
    }
}


/* =========================================================
   MIYLOV CONTACT PAGE - SCOPED ADDITION
   ========================================================= */

/* =========================================================
   Miylov - Contact Page
   Content only: no sidebar / no topbar
   All selectors are scoped under .contact-content-page
   to avoid collisions with miylov.css.
   ========================================================= */

.contact-content-page {
    --contact-primary: #13b5ae;
    --contact-primary-dark: #079a95;
    --contact-text: #152338;
    --contact-muted: #718096;
    --contact-border: #e6edf2;
    --contact-bg: #f5f8fa;
    width: 100%;
    min-height: 100%;
    box-sizing: border-box;
    padding: 32px 34px 44px;
    color: var(--contact-text);
    background: var(--contact-bg);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.contact-content-page *,
.contact-content-page *::before,
.contact-content-page *::after {
    box-sizing: border-box;
}

.contact-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 26px;
}

.contact-eyebrow {
    display: block;
    margin-bottom: 7px;
    color: var(--contact-primary-dark);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.4px;
}

.contact-page-header h1 {
    margin: 0;
    font-size: 31px;
    line-height: 1.15;
    letter-spacing: -.8px;
}

.contact-page-header p {
    margin: 6px 0 0;
    color: var(--contact-muted);
    font-size: 14px;
}

.contact-primary-button,
.contact-secondary-button,
.contact-danger-button,
.contact-accept-button,
.contact-more-button {
    min-height: 40px;
    border-radius: 9px;
    border: 1px solid var(--contact-border);
    padding: 0 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 750;
    white-space: nowrap;
    transition: .18s ease;
}

.contact-primary-button {
    border-color: transparent;
    background: linear-gradient(135deg, var(--contact-primary), #0ba9a3);
    color: #fff;
    box-shadow: 0 7px 18px rgba(14,180,173,.18);
}

.contact-primary-button:hover {
    background: var(--contact-primary-dark);
    transform: translateY(-1px);
}

.contact-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
    margin-bottom: 30px;
}

.contact-summary-card {
    min-height: 91px;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 17px 18px;
    background: #fff;
    border: 1px solid #e8eef2;
    border-radius: 13px;
    box-shadow: 0 5px 16px rgba(30,56,76,.035);
}

.contact-summary-icon {
    width: 49px;
    height: 49px;
    flex: 0 0 49px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: #e1f5f4;
    color: #0eaaa5;
    font-size: 23px;
}

.contact-summary-rose .contact-summary-icon {
    background: #fff0f2;
    color: #ef6b79;
}

.contact-summary-amber .contact-summary-icon {
    background: #fff6e6;
    color: #efad34;
}

.contact-summary-card strong {
    display: block;
    font-size: 24px;
    line-height: 1;
}

.contact-summary-card b {
    display: block;
    margin-top: 5px;
    font-size: 12px;
}

.contact-summary-card span {
    display: block;
    margin-top: 3px;
    color: #81909d;
    font-size: 10px;
}

.contact-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 252px;
    gap: 18px;
    align-items: start;
}

.contact-list-area {
    min-width: 0;
}

.contact-filter-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 15px;
}

.contact-tabs {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.contact-tab {
    height: 36px;
    border: 0;
    border-radius: 9px;
    padding: 0 12px;
    background: #eaf0f4;
    color: #5e7182;
    cursor: pointer;
    font-size: 11px;
    font-weight: 750;
}

.contact-tab span {
    margin-left: 3px;
    opacity: .75;
}

.contact-tab.active {
    background: var(--contact-primary);
    color: #fff;
}

.contact-list-controls {
    display: flex;
    gap: 8px;
}

.contact-search {
    width: 150px;
    height: 36px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    background: #fff;
    border: 1px solid #e0e8ed;
    border-radius: 9px;
}

.contact-search i {
    color: #7d8d9c;
    font-size: 13px;
}

.contact-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--contact-text);
    font-size: 11px;
}

.contact-sort {
    height: 36px;
    border: 1px solid #e0e8ed;
    border-radius: 9px;
    padding: 0 9px;
    outline: 0;
    background: #fff;
    color: #526679;
    font-size: 11px;
}

.contact-list {
    display: grid;
    gap: 10px;
}

.contact-card {
    min-height: 112px;
    display: grid;
    grid-template-columns: 66px minmax(170px, 1fr) auto auto;
    align-items: center;
    gap: 13px;
    padding: 17px 16px;
    background: #fff;
    border: 1px solid #e6edf1;
    border-radius: 14px;
    box-shadow: 0 5px 15px rgba(31,57,75,.03);
}

.contact-avatar-wrap {
    position: relative;
    width: 58px;
    height: 58px;
}

.contact-avatar {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border: 4px solid #f4f7f8;
    border-radius: 50%;
    font-size: 15px;
    font-weight: 800;
}

.contact-avatar.avatar-blue,
.contact-activity-avatar.avatar-blue {
    background: #dbeaf6;
    color: #32627f;
}

.contact-avatar.avatar-pink,
.contact-activity-avatar.avatar-pink {
    background: #f7dfe5;
    color: #9b5265;
}

.contact-avatar.avatar-gray,
.contact-activity-avatar.avatar-gray {
    background: #dfe4e7;
    color: #56636d;
}

.contact-avatar.avatar-gold,
.contact-activity-avatar.avatar-gold {
    background: #f2e3c8;
    color: #85633a;
}

.contact-avatar.avatar-green,
.contact-activity-avatar.avatar-green {
    background: #d7eee8;
    color: #397568;
}

.contact-avatar.avatar-purple,
.contact-activity-avatar.avatar-purple {
    background: #e7def3;
    color: #70548b;
}

.contact-online-dot {
    position: absolute;
    right: -1px;
    bottom: 1px;
    width: 12px;
    height: 12px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #24bf82;
}

.contact-main {
    min-width: 0;
}

.contact-name-line {
    display: flex;
    align-items: center;
    gap: 5px;
}

.contact-name-line h3 {
    margin: 0;
    font-size: 14px;
}

.contact-star {
    border: 0;
    padding: 2px;
    background: transparent;
    color: #c8d1d8;
    cursor: pointer;
    font-size: 13px;
}

.contact-star.favorite {
    color: #f2b63c;
}

.contact-email {
    overflow: hidden;
    margin-top: 3px;
    color: #718396;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contact-tags {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    margin-top: 9px;
}

.contact-tags span {
    border-radius: 20px;
    padding: 4px 8px;
    background: #f0f4f6;
    color: #617485;
    font-size: 9px;
    font-weight: 650;
}

.contact-status-area {
    min-width: 132px;
}

.contact-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 20px;
    padding: 5px 9px;
    font-size: 10px;
    font-weight: 800;
}

.contact-status-badge.status-connected {
    background: #e5f8ef;
    color: #179c67;
}

.contact-status-badge.status-pending {
    background: #fff4d9;
    color: #c28a1b;
}

.contact-status-badge.status-incoming {
    background: #e5f0ff;
    color: #3475c7;
}

.contact-shared-reminders,
.contact-invite-date {
    margin-top: 7px;
    color: #65798b;
    font-size: 10px;
}

.contact-shared-reminders i {
    margin-right: 3px;
}

.contact-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.contact-secondary-button {
    background: #fff;
    color: #30475b;
}

.contact-secondary-button:hover {
    border-color: #cfdce4;
    background: #f7fafb;
}

.contact-accept-button {
    border-color: transparent;
    background: #12b5ad;
    color: #fff;
}

.contact-danger-button {
    border-color: #ffdede;
    background: #fff2f2;
    color: #ef5350;
}

.contact-more-button {
    width: 34px;
    padding: 0;
    background: #fff;
    color: #617485;
}

.contact-more-button:hover {
    background: #f7fafb;
}

.contact-sidebar-content {
    display: grid;
    gap: 15px;
}

.contact-invite-card {
    padding: 23px 18px 18px;
    border: 1px solid #d8efed;
    border-radius: 14px;
    background: linear-gradient(160deg, #e9f8f7, #e5f6f4);
    text-align: center;
}

.contact-promo-icon {
    width: 66px;
    height: 66px;
    display: grid;
    place-items: center;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: #fff;
    color: #13aaa4;
    box-shadow: 0 8px 22px rgba(16,156,151,.09);
    font-size: 29px;
}

.contact-invite-card h3 {
    margin: 0 0 8px;
    font-size: 14px;
}

.contact-invite-card p {
    margin: 0 0 15px;
    color: #66808e;
    font-size: 10px;
    line-height: 1.55;
}

.contact-full-button {
    width: 100%;
}

.contact-activity-card {
    padding: 18px 16px 10px;
    border: 1px solid #e6edf1;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 5px 15px rgba(31,57,75,.03);
}

.contact-card-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 13px;
}

.contact-card-heading h3 {
    margin: 0;
    font-size: 13px;
}

.contact-card-heading a {
    color: #12aaa4;
    text-decoration: none;
    font-size: 10px;
    font-weight: 750;
}

.contact-activity-item {
    position: relative;
    display: flex;
    gap: 9px;
    padding: 10px 0;
    border-bottom: 1px solid #eef2f4;
}

.contact-activity-item:last-child {
    border-bottom: 0;
}

.contact-activity-avatar {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 9px;
    font-weight: 800;
}

.contact-activity-copy {
    min-width: 0;
    padding-right: 15px;
}

.contact-activity-copy strong {
    display: block;
    font-size: 10px;
}

.contact-activity-copy span {
    display: block;
    margin-top: 2px;
    color: #687b8c;
    font-size: 9px;
}

.contact-activity-copy small {
    display: block;
    margin-top: 3px;
    color: #9aa7b1;
    font-size: 8px;
}

.contact-activity-icon {
    position: absolute;
    right: 0;
    bottom: 12px;
    color: #13afa8;
    font-size: 12px;
}

.contact-quote-card {
    min-height: 122px;
    padding: 19px 20px;
    border: 1px solid transparent;
    border-radius: 14px;
    background: #eef5fb;
    color: #63768a;
    text-align: center;
}

.contact-quote-mark {
    color: #a4b5c3;
    font-size: 35px;
    line-height: .4;
}

.contact-quote-card p {
    margin: 5px 0 12px;
    font-size: 12px;
    font-style: italic;
    line-height: 1.45;
}

.contact-quote-card strong {
    color: #159f9a;
    font-size: 10px;
}

.contact-empty {
    padding: 45px 20px;
    border: 1px dashed #d7e2e8;
    border-radius: 14px;
    background: #fff;
    text-align: center;
}

.contact-empty-icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    margin: 0 auto 10px;
    border-radius: 50%;
    background: #e7f7f6;
    color: #13aaa5;
    font-size: 23px;
}

.contact-empty h3 {
    margin: 0;
    font-size: 15px;
}

.contact-empty p {
    margin: 7px 0 16px;
    color: #7a8b99;
    font-size: 11px;
}

.contact-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(13,27,39,.52);
    backdrop-filter: blur(3px);
}

.contact-modal {
    position: relative;
    width: min(100%, 440px);
    padding: 28px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(0,0,0,.18);
}

.contact-modal-close {
    position: absolute;
    top: 17px;
    right: 17px;
    border: 0;
    background: transparent;
    color: #718291;
    cursor: pointer;
}

.contact-modal-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: #e5f8f6;
    color: #11aaa4;
    font-size: 21px;
}

.contact-modal h2 {
    margin: 14px 0 5px;
    font-size: 22px;
}

.contact-modal > p {
    margin: 0 0 20px;
    color: #718291;
    font-size: 12px;
}

.contact-modal label {
    display: block;
    margin: 14px 0 6px;
    font-size: 11px;
    font-weight: 800;
}

.contact-modal label span {
    color: #9aa7b1;
    font-weight: 500;
}

.contact-modal input,
.contact-modal textarea {
    width: 100%;
    border: 1px solid #dce6eb;
    border-radius: 9px;
    padding: 11px 12px;
    outline: 0;
    background: #fbfcfd;
    color: var(--contact-text);
    font: inherit;
    font-size: 12px;
}

.contact-modal textarea {
    resize: vertical;
}

.contact-modal input:focus,
.contact-modal textarea:focus {
    border-color: #62cfc9;
    box-shadow: 0 0 0 3px rgba(19,181,174,.1);
}

.contact-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 21px;
}

@media (max-width: 1200px) {
    .contact-workspace {
        grid-template-columns: 1fr;
    }

    .contact-sidebar-content {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 950px) {
    .contact-content-page {
        padding: 25px 20px 35px;
    }

    .contact-card {
        grid-template-columns: 55px minmax(0, 1fr);
    }

    .contact-status-area,
    .contact-actions {
        grid-column: 2;
    }

    .contact-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

@media (max-width: 760px) {
    .contact-content-page {
        padding: 20px 14px 30px;
    }

    .contact-page-header {
        flex-direction: column;
    }

    .contact-page-header > .contact-primary-button {
        width: auto;
    }

    .contact-summary-grid {
        grid-template-columns: 1fr;
    }

    .contact-filter-row {
        flex-direction: column;
        align-items: stretch;
    }

    .contact-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 3px;
    }

    .contact-tab {
        flex: 0 0 auto;
    }

    .contact-list-controls {
        width: 100%;
    }

    .contact-search {
        width: auto;
        flex: 1;
    }

    .contact-sidebar-content {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .contact-page-header h1 {
        font-size: 27px;
    }

    .contact-page-header > .contact-primary-button {
        width: 100%;
    }

    .contact-card {
        padding: 14px;
    }

    .contact-actions .contact-secondary-button,
    .contact-actions .contact-accept-button,
    .contact-actions .contact-danger-button {
        flex: 1;
    }

    .contact-modal {
        padding: 23px;
    }
}


/* =========================================================
   MIYLOV - SIDEBAR REDESIGN
   ---------------------------------------------------------
   Sadece MainLayout sidebar alanını hedefler.
   ========================================================= */

:root {
  --miylov-sidebar-bg: #0b1117;
  --miylov-sidebar-bg-soft: #101820;
  --miylov-sidebar-border: rgba(255,255,255,.075);
  --miylov-sidebar-text: #aab6c4;
  --miylov-sidebar-text-strong: #f4f8fb;
  --miylov-sidebar-muted: #647180;
  --miylov-sidebar-accent: #18c5ae;
  --miylov-sidebar-accent-soft: rgba(24,197,174,.12);
  --miylov-sidebar-accent-border: rgba(24,197,174,.20);
}

/* Ana panel */
.sidebar {
  width: var(--sidebar-width);
  background:
    radial-gradient(circle at 15% 0%, rgba(24,197,174,.10), transparent 30%),
    linear-gradient(180deg, #0b1117 0%, #0a1016 100%);
  border-right: 1px solid var(--miylov-sidebar-border);
  box-shadow: 12px 0 35px rgba(5,10,16,.10);
  color: var(--miylov-sidebar-text);
}

/* Üst marka alanı */
.sidebar-brand {
  height: var(--topbar-height);
  padding: 0 20px;
  border-bottom: 1px solid var(--miylov-sidebar-border);
  position: relative;
}

.sidebar-brand::after {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(24,197,174,.35),
    transparent 70%
  );
}

.brand-mark {
  gap: 10px;
  color: var(--miylov-sidebar-text-strong);
  font-size: 1.48rem;
  letter-spacing: -.045em;
}

.brand-text::first-letter {
  color: var(--miylov-sidebar-accent);
}

.brand-symbol {
  width: 28px;
  height: 28px;
  border: 4px solid var(--miylov-sidebar-accent);
  border-right-color: transparent;
  box-shadow: 0 0 20px rgba(24,197,174,.12);
}

.brand-symbol span {
  width: 8px;
  height: 8px;
  right: -5px;
  top: 5px;
  background: #26d5bc;
  box-shadow: 0 0 12px rgba(38,213,188,.45);
}

.sidebar-close {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.045);
  color: #8d99a7;
  transition: .18s ease;
}

.sidebar-close:hover {
  color: #fff;
  background: rgba(255,255,255,.09);
}

/* Menü */
.sidebar-nav {
  padding: 24px 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.10) transparent;
}

.sidebar-nav::-webkit-scrollbar {
  width: 5px;
}

.sidebar-nav::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.10);
  border-radius: 20px;
}

.nav-section-title {
  padding: 4px 13px 10px;
  color: var(--miylov-sidebar-muted);
  font-size: .62rem;
  letter-spacing: .14em;
}

/* Menü bağlantıları */
.nav-item-link {
  position: relative;
  min-height: 44px;
  padding: 10px 13px;
  margin: 4px 0;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--miylov-sidebar-text);
  font-weight: 500;
  transition:
    background .18s ease,
    border-color .18s ease,
    color .18s ease,
    transform .18s ease;
}

.nav-item-link i {
  width: 21px;
  color: #718091;
  font-size: 1rem;
  transition: color .18s ease, transform .18s ease;
}

.nav-item-link span {
  line-height: 1;
}

.nav-item-link:hover {
  color: #eef7f6;
  background: rgba(255,255,255,.045);
  border-color: rgba(255,255,255,.055);
  transform: translateX(2px);
}

.nav-item-link:hover i {
  color: #55d8c5;
  transform: scale(1.05);
}

/* Aktif menü */
.nav-item-link.active {
  color: #f5fffd;
  background:
    linear-gradient(
      90deg,
      rgba(24,197,174,.16),
      rgba(24,197,174,.07)
    );
  border-color: var(--miylov-sidebar-accent-border);
  box-shadow:
    inset 0 0 18px rgba(24,197,174,.035),
    0 5px 18px rgba(0,0,0,.12);
  font-weight: 600;
}

.nav-item-link.active::before {
  content: "";
  position: absolute;
  left: -13px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 4px 4px 0;
  background: var(--miylov-sidebar-accent);
  box-shadow: 0 0 14px rgba(24,197,174,.50);
}

.nav-item-link.active i {
  color: var(--miylov-sidebar-accent);
}

/* Alt bölüm aktif kullanım için hazır */
.sidebar-footer {
  padding: 14px 12px;
  border-top: 1px solid var(--miylov-sidebar-border);
  background: rgba(0,0,0,.10);
}

.mini-profile {
  padding: 9px 10px;
  border: 1px solid rgba(255,255,255,.055);
  border-radius: 10px;
  background: rgba(255,255,255,.035);
}

.avatar,
.topbar-avatar {
  background: rgba(24,197,174,.13);
  color: #53d7c5;
}

.profile-copy strong {
  color: #e8eef3;
}

.profile-copy span {
  color: #6f7d8c;
}

/* Mobilde gölgeyi daha belirgin tut */
@media (max-width: 991.98px) {
  .sidebar {
    box-shadow: 14px 0 45px rgba(0,0,0,.30);
  }
}

/* Dark mode'da sidebar tasarımı değişmesin */
.dark-mode .sidebar {
  background:
    radial-gradient(circle at 15% 0%, rgba(24,197,174,.10), transparent 30%),
    linear-gradient(180deg, #0b1117 0%, #0a1016 100%);
  border-color: var(--miylov-sidebar-border);
}

.dark-mode .nav-item-link {
  color: var(--miylov-sidebar-text);
}

.dark-mode .nav-item-link:hover {
  color: #eef7f6;
  background: rgba(255,255,255,.045);
}

.dark-mode .nav-item-link.active {
  color: #f5fffd;
  background:
    linear-gradient(
      90deg,
      rgba(24,197,174,.16),
      rgba(24,197,174,.07)
    );
  border-color: var(--miylov-sidebar-accent-border);
}

.dark-mode .nav-item-link.active i {
  color: var(--miylov-sidebar-accent);
}