/* worksheet.css */
:root {
      --sun:#FFD23F; --coral:#FF6B6B; --sky:#4ECDC4; --grape:#6C63FF;
      --cloud:#F8F9FF; --ink:#2B2D42; --muted:#8D99AE; --white:#FFFFFF;
      --border:#E8EAF6; --green:#3ECF8E;
      --shadow:0 4px 18px rgba(0,0,0,.08); --shadow-lg:0 16px 48px rgba(0,0,0,.13);
    }
    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth}
    body{font-family:'Nunito',sans-serif;background:var(--cloud);color:var(--ink)}

    /* ── NAV ── */
    nav{position:sticky;top:0;z-index:200;background:var(--white);display:flex;align-items:center;justify-content:space-between;padding:0 40px;height:70px;box-shadow:0 3px 0 var(--sun),0 4px 20px rgba(0,0,0,.06)}
    .logo{font-family:'Fredoka One',cursive;font-size:1.85rem;color:var(--grape);text-decoration:none}
    .logo .spark{color:var(--coral)}
    .nav-links{display:flex;align-items:center;gap:4px;list-style:none}
    .nav-links > li{position:relative}
    .nav-links > li > a{font-weight:800;font-size:.9rem;color:var(--ink);text-decoration:none;padding:8px 16px;border-radius:50px;transition:.15s;display:flex;align-items:center;gap:5px}
    .nav-links > li > a:hover{background:var(--cloud);color:var(--grape)}
    .nav-links > li > a.active-nav{color:var(--grape);background:#F0EEFF}
    .nav-links > li > a .caret{font-size:.6rem;transition:transform .2s;display:inline-block}
    .nav-pill{background:var(--grape)!important;color:var(--white)!important;border-radius:50px!important;padding:10px 22px!important;box-shadow:0 4px 14px rgba(108,99,255,.35)}
    .nav-pill:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(108,99,255,.45)!important}
    .nav-login{border:2px solid var(--border)!important;border-radius:50px!important;padding:8px 18px!important;font-weight:800!important;color:var(--ink)!important;transition:.15s!important}
    .nav-login:hover{border-color:var(--grape)!important;color:var(--grape)!important;background:#F5F3FF!important}
    .dropdown{display:none;position:absolute;top:calc(100% + 4px);left:0;z-index:9999;min-width:200px}
    .dropdown.open{display:block}
    .dropdown-inner{background:var(--white);border-radius:18px;box-shadow:0 12px 48px rgba(0,0,0,.18),0 0 0 1.5px rgba(108,99,255,.1);padding:10px;animation:dropIn .15s ease}
    @keyframes dropIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
    .dropdown.grid-drop .dropdown-inner{display:grid;grid-template-columns:1fr 1fr;gap:2px;min-width:220px}
    .dropdown.grid-drop .drop-header{grid-column:span 2}
    .drop-header{font-size:.7rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:6px 10px 8px}
    .drop-item{display:flex;align-items:center;padding:9px 14px;border-radius:10px;text-decoration:none;color:var(--ink);font-weight:700;font-size:.9rem;white-space:nowrap;transition:background .12s,color .12s}
    .drop-item:hover{background:#F0EEFF;color:var(--grape)}
    @media(max-width:860px){nav{padding:0 20px}.nav-links{display:none}}
    /* ── BREADCRUMB ── */
    .breadcrumb-bar{background:var(--white);border-bottom:1.5px solid var(--border);padding:12px 40px;display:flex;align-items:center;gap:8px;font-size:.82rem;font-weight:700;color:var(--muted);flex-wrap:wrap}
    .breadcrumb-bar a{color:var(--grape);text-decoration:none}
    .breadcrumb-bar a:hover{text-decoration:underline}
    .breadcrumb-bar span{color:var(--muted)}
    .bc-sep{color:#ccc}

    /* ── MAIN LAYOUT ── */
    .page-wrap{max-width:1160px;margin:0 auto;padding:36px 40px 60px;display:grid;grid-template-columns:1fr 340px;gap:40px;align-items:start}

    /* ── LEFT COLUMN ── */
    .ws-label{font-size:.74rem;font-weight:900;text-transform:uppercase;letter-spacing:.09em;color:var(--coral);margin-bottom:8px}
    .ws-title{font-family:'Fredoka One',cursive;font-size:2rem;color:var(--ink);margin-bottom:16px;line-height:1.2}

    /* Preview card */
    .preview-card{background:var(--white);border-radius:24px;overflow:hidden;box-shadow:var(--shadow-lg);margin-bottom:28px;position:relative}
    .preview-header{padding:16px 20px;border-bottom:1.5px solid var(--border);display:flex;align-items:center;justify-content:space-between}
    .preview-header .ph-left{display:flex;align-items:center;gap:10px}
    .preview-badge{background:#F0EEFF;color:var(--grape);font-size:.72rem;font-weight:900;text-transform:uppercase;letter-spacing:.06em;padding:4px 12px;border-radius:50px}
    .preview-pages{font-size:.78rem;font-weight:700;color:var(--muted)}
    .preview-actions{display:flex;gap:8px}
    .prev-btn,.next-btn{width:32px;height:32px;border-radius:50%;border:2px solid var(--border);background:var(--white);cursor:pointer;font-size:.9rem;transition:.15s;display:flex;align-items:center;justify-content:center}
    .prev-btn:hover,.next-btn:hover{border-color:var(--grape);color:var(--grape)}
    .prev-btn:disabled,.next-btn:disabled{opacity:.3;cursor:not-allowed}

    .preview-body{background:#f5f5f0;min-height:520px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
    .ws-preview-img{width:100%;max-height:600px;object-fit:contain;display:block}

    /* Placeholder when no image */
    .preview-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:60px;text-align:center;width:100%}
    .preview-placeholder .pl-emoji{font-size:5rem}
    .preview-placeholder .pl-title{font-family:'Fredoka One',cursive;font-size:1.4rem;color:var(--ink)}
    .preview-placeholder .pl-sub{font-size:.9rem;color:var(--muted);font-weight:700;max-width:300px;line-height:1.6}
    .preview-placeholder .pl-grade{display:inline-flex;align-items:center;gap:6px;background:var(--white);border-radius:50px;padding:6px 16px;font-size:.8rem;font-weight:800;color:var(--grape);box-shadow:var(--shadow)}

    /* Sample worksheet content */
    .ws-content{padding:32px;background:var(--white)}
    .ws-content-title{font-family:'Fredoka One',cursive;font-size:1.3rem;color:var(--ink);text-align:center;margin-bottom:6px}
    .ws-content-sub{font-size:.82rem;color:var(--muted);font-weight:700;text-align:center;margin-bottom:24px}
    .ws-instruction{background:#FFF8E1;border-left:4px solid var(--sun);border-radius:0 12px 12px 0;padding:12px 16px;font-size:.88rem;font-weight:700;color:#5a4700;margin-bottom:24px}
    .ws-exercise-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
    .ws-exercise{background:var(--cloud);border-radius:16px;padding:20px;text-align:center;border:2px solid var(--border)}
    .ws-ex-emoji{font-size:2.2rem;margin-bottom:8px}
    .ws-ex-shapes{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;margin-bottom:12px;min-height:40px}
    .ws-ex-shapes span{font-size:1.4rem}
    .ws-ex-choices{display:flex;justify-content:center;gap:8px}
    .ws-ex-num{width:32px;height:32px;border-radius:50%;border:2.5px solid var(--border);background:var(--white);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:.95rem;cursor:pointer;transition:.15s;user-select:none}
    .ws-ex-num:hover{border-color:var(--grape);background:#F0EEFF;color:var(--grape)}
    .ws-ex-num.circled{border-color:var(--coral);background:#FFF0F0;color:var(--coral);box-shadow:0 0 0 3px rgba(255,107,107,.2)}
    .ws-ex-num.correct{border-color:var(--green);background:#E8FFF4;color:var(--green);box-shadow:0 0 0 3px rgba(62,207,142,.2)}
    .ws-footer-note{text-align:center;font-size:.76rem;color:var(--muted);font-weight:700;margin-top:20px;padding-top:16px;border-top:1px dashed var(--border)}

    /* Page indicator dots */
    .page-dots{display:flex;justify-content:center;gap:6px;padding:14px}
    .page-dot{width:8px;height:8px;border-radius:50%;background:var(--border);transition:.15s;cursor:pointer}
    .page-dot.active{background:var(--grape);width:20px;border-radius:4px}

    /* Description */
    .ws-description{font-size:.97rem;line-height:1.8;color:#444;font-weight:600;margin-bottom:20px}
    .ws-description-more{display:none}
    .read-more-btn{background:none;border:none;color:var(--grape);font-family:'Nunito',sans-serif;font-weight:800;font-size:.9rem;cursor:pointer;padding:0}
    .read-more-btn:hover{text-decoration:underline}

    /* Standards */
    .standards-section{margin-top:24px}
    .standards-title{font-weight:900;font-size:.85rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:12px}
    .standards-list{display:flex;flex-direction:column;gap:8px}
    .standard-item{display:flex;align-items:flex-start;gap:10px;padding:10px 14px;background:var(--white);border-radius:12px;border:1.5px solid var(--border)}
    .standard-badge{font-size:.68rem;font-weight:900;text-transform:uppercase;background:#F0EEFF;color:var(--grape);padding:3px 8px;border-radius:6px;white-space:nowrap;margin-top:1px}
    .standard-text{font-size:.82rem;font-weight:700;color:var(--ink);line-height:1.5}

    /* Related */
    .related-section{margin-top:36px}
    .related-title{font-family:'Fredoka One',cursive;font-size:1.3rem;color:var(--ink);margin-bottom:16px}
    .related-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
    .related-card{background:var(--white);border-radius:16px;overflow:hidden;box-shadow:var(--shadow);text-decoration:none;color:var(--ink);transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column}
    .related-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
    .rc-thumb{height:90px;display:flex;align-items:center;justify-content:center;font-size:2.2rem;position:relative}
    .rc-thumb .dots{position:absolute;inset:0;opacity:.12;background-image:radial-gradient(circle,#fff 1.5px,transparent 1.5px);background-size:14px 14px}
    .rc-body{padding:12px}
    .rc-title{font-weight:800;font-size:.82rem;line-height:1.35;margin-bottom:4px;color:var(--ink)}
    .rc-meta{font-size:.72rem;color:var(--muted);font-weight:700}

    /* ── RIGHT COLUMN (sidebar) ── */
    .ws-sidebar{position:sticky;top:90px;display:flex;flex-direction:column;gap:16px}

    /* Action buttons */
    .action-card{background:var(--white);border-radius:20px;padding:22px;box-shadow:var(--shadow)}
    .btn-download{width:100%;padding:15px;border-radius:50px;border:none;background:var(--grape);color:var(--white);font-family:'Nunito',sans-serif;font-weight:900;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 6px 22px rgba(108,99,255,.35);transition:.15s;margin-bottom:10px;text-decoration:none}
    .btn-download:hover{background:#5a52e0;transform:translateY(-2px);box-shadow:0 10px 28px rgba(108,99,255,.45)}
    .btn-print{width:100%;padding:13px;border-radius:50px;border:2.5px solid var(--grape);background:var(--white);color:var(--grape);font-family:'Nunito',sans-serif;font-weight:900;font-size:.95rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:.15s;margin-bottom:10px}
    .btn-print:hover{background:var(--grape);color:var(--white)}
    .btn-save{width:100%;padding:12px;border-radius:50px;border:2px solid var(--border);background:var(--white);color:var(--muted);font-family:'Nunito',sans-serif;font-weight:800;font-size:.9rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:.15s}
    .btn-save:hover{border-color:var(--coral);color:var(--coral)}
    .btn-save.saved{border-color:var(--coral);color:var(--coral);background:#FFF5F5}
    .action-divider{height:1px;background:var(--border);margin:14px 0}
    .share-row{display:flex;gap:8px;justify-content:center}
    .share-btn{flex:1;padding:10px;border-radius:12px;border:2px solid var(--border);background:var(--white);font-family:'Nunito',sans-serif;font-weight:800;font-size:.78rem;cursor:pointer;color:var(--ink);transition:.15s;display:flex;align-items:center;justify-content:center;gap:6px}
    .share-btn:hover{border-color:var(--grape);color:var(--grape);background:#F5F3FF}

    /* Rating */
    .rating-row{display:flex;align-items:center;gap:8px;margin-top:14px}
    .rating-stars{display:flex;gap:3px}
    .rating-star{font-size:1.3rem;cursor:pointer;transition:transform .1s;color:#ddd}
    .rating-star.filled{color:var(--sun)}
    .rating-star:hover{transform:scale(1.2)}
    .rating-text{font-size:.8rem;font-weight:700;color:var(--muted)}

    /* Metadata card */
    .meta-card{background:var(--white);border-radius:20px;padding:20px;box-shadow:var(--shadow)}
    .meta-item{display:flex;flex-direction:column;gap:4px;padding:10px 0;border-bottom:1px solid var(--border)}
    .meta-item:last-child{border-bottom:none;padding-bottom:0}
    .meta-label{font-size:.7rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
    .meta-value{display:flex;flex-wrap:wrap;gap:6px}
    .meta-tag{display:inline-flex;align-items:center;padding:4px 12px;border-radius:50px;font-size:.78rem;font-weight:800;text-decoration:none;transition:background .15s}
    .meta-tag:hover{opacity:.8}

    /* Stats row */
    .stats-mini{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
    .stat-mini{background:var(--cloud);border-radius:12px;padding:12px;text-align:center}
    .stat-mini .sn{font-family:'Fredoka One',cursive;font-size:1.2rem;color:var(--grape)}
    .stat-mini .sl{font-size:.7rem;font-weight:800;text-transform:uppercase;color:var(--muted);letter-spacing:.05em}

    /* Toast */
    #toast{position:fixed;bottom:24px;right:24px;background:var(--ink);color:var(--white);padding:12px 20px;border-radius:12px;font-weight:800;font-size:.9rem;box-shadow:var(--shadow-lg);display:none;z-index:999;align-items:center;gap:8px}
    #toast.show{display:flex;animation:toastIn .3s ease}
    @keyframes toastIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

    /* Print styles */
    @media print{
      nav,aside,.breadcrumb-bar,.action-card,.meta-card,.related-section,.standards-section,.read-more-btn{display:none!important}
      .page-wrap{grid-template-columns:1fr;padding:0}
      .preview-card,.ws-content{box-shadow:none;border:none}
      body{background:white}
    }

    @media(max-width:900px){
      .page-wrap{grid-template-columns:1fr;padding:20px 16px 40px}
      .ws-sidebar{position:static}
      nav{padding:0 20px}
      .nav-links{display:none}
      .breadcrumb-bar{padding:10px 16px}
      .ws-exercise-grid{grid-template-columns:repeat(2,1fr)}
      .related-grid{grid-template-columns:1fr}
    }