:root{
      --pink:#e591ba; 
      --blue:#d0eefa; 
      --lime:#d7ff7b; 
      --lightblue:#4d61f5;
      --lavendar:#cc88ff;
      --navy:#040b44; 
      --white:#FAFAFA; 
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    html { -webkit-text-size-adjust: 100%;}
    body{margin:0;font-family: "Arial", sans-serif;background:var(--blue);color:var(--navy)}
    /* Prevent iOS input zoom by ensuring >=16px font-size */
    input, select, textarea {font-size: 16px;}
    .container{max-width:920px;margin:0 auto;padding:20px}
    header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:8px}
    .brand{display:flex;align-items:center;gap:12px}
    .brand-logo{width:55px;height:55px;}
    .brand-title{margin:0;font-weight:800;letter-spacing:.2px;font-family:"Fredoka",sans-serif;}
    .sort{display:flex;align-items:center;gap:8px;justify-content:flex-end;}
    .sort label{opacity:.85;font-size:.8rem;font-weight:800;}
    .sort select{background:var(--white);border:1px solid var(--lightblue);color:var(--navy);padding:2px 4px;border-radius:10px}

    .hidden{display:none}
    .view{margin-top:20px}

    .card{flex-direction: column; align-items: stretch; border:2px solid var(--lightblue);font-family:Arial, sans-serif;border-radius:16px;padding:16px 18px;background-color:var(--lime)}
    .card + .card{margin-top:12px}
    .card .meta{opacity:.75;font-size:.85rem}
    

    .btn{--b:rgba(216, 143, 211, 0.16);--bg:rgba(255,255,255,.08);--fg:var(--white);display:inline-flex;align-items:center;gap:.5rem;padding:.6rem .9rem;border-radius:12px;border:1px solid var(--b);background:var(--bg);color:var(--navy);font-weight:700;cursor:pointer;transition:.15s transform,.15s filter}
    .btn:hover{transform:translateY(-1px);filter:brightness(1.06)}
    .btn:active{transform:translateY(0)}
    .btn.blue{--bg:var(--lightblue);--fg:#00122e;color:var(--white)}
    .btn.white{--bg:var(--white);border:2px solid var(--lightblue);color:var(--lightblue)}
    .btn.pink{--bg:linear-gradient(135deg,#ff45a9,var(--pink));--b:rgba(255,0,122,.45);--fg:#2a0013;color:#2a0013}
    .btn.danger{--bg:linear-gradient(135deg,#ff6b6b,#ff1744);--b:rgba(255,61,61,.45);--fg:#2a0004;color:#2a0004}
    .btn.ghost{background:transparent;border:1px dashed rgba(255,255,255,.25)}

    .editor{background:var(--lime);border:2px solid var(--lightblue);border-radius:18px;padding:16px}
    .editor-top{display:flex;flex-wrap:wrap;align-items:center;gap:12px;justify-content:space-between}
    .title-input{flex:1;min-width:200px;background:transparent;border:none;color:var(--navy);font-weight:800;font-size:16px;padding:8px 4px;font-family:"Fredoka",sans-serif;}
    .title-input:focus{outline:none;border-color:var(--blue)}
    .items{list-style:none;margin:12px 0 0;padding:0;border-top:1px solid rgba(255,255,255,.12)}
    .items li{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:8px;padding:10px 0;}
    .items input[type="text"]{flex:1;background:transparent;border:none;color:var(--navy);padding:6px 4px}
    .items input[type="text"]:focus{outline:none;border-color:var(--blue);font-size:16px;}
    .adder{margin-top:14px;display:flex;gap:10px}
    .adder input{flex:1;background:var(--white);color:var(--navy);border:1px solid var(--lightblue);border-radius:12px;padding:10px;font-size:16px;}

    .fab{position:fixed;right:22px;bottom:22px;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;border:none;background:var(--lavendar);color:#00122e;font-size:1.2rem;font-weight:900;box-shadow:0 16px 36px rgba(0,0,0,.35);cursor:pointer}
    .fab:hover{transform:translateY(-1px)}

    /* Modal */
    
    .modal-overlay{position:fixed;inset:0;display:none;background:rgba(0,0,0,.55);backdrop-filter:blur(2px)}
    .modal-overlay[aria-hidden="false"]{display:block}
    .modal-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(92vw,36rem);background:var(--blue);color:var(--navy);border-radius:18px;padding:20px;box-shadow:0 24px 64px rgba(0,0,0,.45)}
    .modal-card h2{margin:0 0 6px;font-family:"Fredoka",sans-serif;}
    .random-text{font-size:1.2rem;margin:12px 0 12px;word-break:break-word}
    .modal-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;margin-top:16px}
    .modal-exit {position: absolute; top: 12px;right: 12px;background: none;border: none;color:var(--navy);font-size: 1.4rem;cursor: pointer;}

        .footnote{text-align:center;margin-top: 30px;color:#666666;font-size:0.8rem;}
        .footnote a{color:#666666;}


    .empty{display:grid;place-items:center;padding:64px;border:2px dashed rgba(255,255,255,.2);border-radius:18px;text-align:center;opacity:.9}
    .empty p{margin:.25rem 0}

    @media (max-width:600px){ .brand-title{font-size:1.15rem} }