.modal-overlay{
    position:fixed;inset:0;
    background:var(--overlay);
    backdrop-filter:blur(12px);
    display:flex;align-items:center;justify-content:center;
    padding:var(--sp-5);
    opacity:0;pointer-events:none;
    transition:opacity var(--dur-base) var(--ease-out);
    z-index:600;
  }
  .modal-overlay.open{opacity:1;pointer-events:auto;}
  .modal-card{
    background:var(--card);
    border-radius:var(--radius-xl);
    max-width:560px;width:100%;
    max-height:85vh;overflow-y:auto;
    padding:0 0 var(--sp-6) 0;
    transform:scale(0.9) translateY(14px);
    transition:background var(--dur-slow) var(--ease-out),border-color var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out),box-shadow var(--dur-slow) var(--ease-out);
    box-shadow:var(--shadow-lg);
  }
  .modal-card.small{max-width:400px;padding-bottom:var(--sp-5);}
  .modal-overlay.open .modal-card{transform:scale(1) translateY(0);}
  .modal-media{
    position:relative;
    width:100%;
    min-height:180px;
    overflow:hidden;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg, var(--lav) 0%, var(--pink) 50%, var(--peach) 100%);
    border-radius:var(--radius-xl) var(--radius-xl) 0 0;
  }
  .modal-media:has(img.media-main[src]){
    min-height:0;
  }
  .modal-media img.media-bg{
    position:absolute;inset:-10%;
    width:120%;height:120%;
    object-fit:cover;
    filter:blur(40px) saturate(1.4);
    transform:scale(1.08);
    pointer-events:none;user-select:none;
  }
  .modal-media img.media-main{
    position:relative;z-index:1;
    width:auto;height:auto;
    max-width:100%;max-height:min(380px, 45vh);
    object-fit:contain;
    display:block;
    filter:saturate(1.05);
    box-shadow:0 16px 48px rgba(70,40,92,0.32);
  }
  .modal-media .blur-fade-media{
    position:absolute;inset:0;z-index:0;
    background:linear-gradient(180deg, rgba(20,10,30,0.22) 0%, rgba(20,10,30,0.04) 55%, rgba(20,10,30,0.35) 100%);
    pointer-events:none;
  }
  .modal-body{padding:var(--sp-6) var(--sp-7) var(--sp-1);}
  .modal-close{
    position:sticky;top:var(--sp-4);float:right;margin:var(--sp-4) var(--sp-4) -38px 0;
    display:flex;align-items:center;justify-content:center;
    background:var(--surface-raised);border:none;
    width:36px;height:36px;border-radius:50%;cursor:pointer;
    color:var(--text-secondary);
    box-shadow:0 3px 12px rgba(96,70,120,0.24);
    transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-bounce);
  }
  .modal-close .ico{width:16px;height:16px;}
  .modal-close:hover{background:var(--surface-hover);color:var(--danger-deep);transform:rotate(90deg) scale(1.08);}
  .modal-body h2{font-family:'Baloo 2',cursive;color:var(--accent-deep);margin:0 0 var(--sp-1) 0;font-size:1.45rem;}
  .modal-body .modal-sub{color:var(--accent);opacity:0.85;margin:0 0 var(--sp-1) 0;font-size:0.95rem;}
  .modal-body time{
    font-size:0.75rem;color:var(--text-faint);
    display:inline-flex;align-items:center;gap:var(--sp-2);
  }
  .modal-body time::before{
    content:'';
    width:var(--sp-2);height:var(--sp-2);border-radius:50%;
    background:linear-gradient(135deg, var(--lav), var(--pink));
    flex:none;
  }
  .modal-body .md{margin-top:var(--sp-4);line-height:1.65;font-size:0.98rem;}
  .modal-body .md h1{font-size:1.3rem;color:var(--accent-deep);}
  .modal-body .md h2{font-family:'Baloo 2',cursive;font-size:1.1rem;color:var(--lav-deep);}
  .modal-body .md code{background:var(--card-soft);border:var(--border);border-radius:var(--radius-sm);padding:1px 6px;font-size:0.85em;}
  .modal-body .md blockquote{border-left:3px solid var(--lav);margin:var(--sp-2) 0;padding:var(--sp-1) var(--sp-4);color:var(--text-soft);}
  .settings-modal .modal-body{max-width:560px;}
  .cfg-rows{display:flex;flex-direction:column;gap:10px;margin-top:8px;max-height:50vh;overflow:auto;padding-right:4px;}
  .cfg-row{
    display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;
    background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px;
  }
  .cfg-row .cfg-name{font-weight:700;font-size:0.9rem;color:var(--text-primary);}
  .cfg-row .cfg-name small{display:block;font-weight:600;color:var(--text-secondary);font-size:0.76rem;}
  .cfg-row input[type="number"],
  .cfg-row input[type="date"],
  .cfg-row input[type="text"]{
    width:100%;margin:0;padding:6px 8px;
  }
  .cfg-row input[type="checkbox"]{width:18px;height:18px;accent-color:var(--accent);}
  .cfg-row .cfg-sub{display:flex;gap:6px;align-items:center;}
  .cfg-lbl{font-size:0.72rem;color:var(--text-secondary);font-weight:600;}
  .cfg-field{display:flex;flex-direction:column;gap:4px;}
  .cfg-field input[type="number"]{width:74px;}