/* 1. CSS Reset / Normalize */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{height:100%;line-height:1.5;-webkit-text-size-adjust:100%;}
img,picture,video,canvas,svg{display:block;max-width:100%;}
input,button,textarea,select{font:inherit;}
p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;}
body{display:flex;flex-direction:column;min-height:100vh;text-rendering:optimizeSpeed;font-family:var(--font-sans);background-color:var(--color-bg);color:var(--color-text);}

/* 2. CSS Variables (Theme) */
:root{
  --color-bg:#ffffff;
  --color-dark-blue:#00297A;
  --color-surface:#ffffff;
  --color-primary:#4E95D9;
  --color-primary-hover:#2975C1;
  --color-secondary:#6b7280;
  --color-secondary-hover:#4b5563;
  --color-success:#29AD3C;
  --color-success-hover:#218838;
  --color-warning:#ffc107;
  --color-warning-hover:#e0a800;
  --color-danger:#dc3545;
  --color-danger-hover:#c82333;
  --color-info:#17a2b8;
  --color-info-hover:#117a8b;
  --color-text:#111827;
  --color-border:#e5e7eb;
  --color-header-bg:#dbeafe;
  --font-sans:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-heading:'Poppins','Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --radius:0.75rem;
  --spacing-sm:0.3rem;
  --spacing-md:0.85rem;
  --spacing-lg:1.5rem;
  --transition-fast:0.16s ease-out;
}

/* 3. Typography */
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);margin-bottom:var(--spacing-md);color:var(--color-text);line-height:1.2;font-weight:600;letter-spacing:0.01em;}
h1{font-size:1.9rem;}
h2{font-size:1.6rem;}
h3{font-size:1.3rem;}
h4{font-size:1.05rem;}
p{margin-bottom:var(--spacing-md);}
a{color:var(--color-primary);text-decoration:none;transition:color var(--transition-fast),opacity var(--transition-fast);}
a:hover,a:focus,a:active{text-decoration:none;color:var(--color-primary-hover);opacity:0.9;}
ul,ol{margin-left:var(--spacing-lg);margin-bottom:var(--spacing-md);}
.highlight{font-weight:500;color:var(--color-dark-blue);font-size:1rem;margin-bottom:1rem;margin-top:0.5rem;}
.highlight-b{font-weight:600;color:var(--color-dark-blue);font-size:0.9rem;}
.small{font-weight:500;color:var(--color-primary);font-size:0.85rem;}
.errormsg{font-weight:500;color:var(--color-danger);font-size:1rem;margin-bottom:1rem;margin-top:0.5rem;}
.confirmmsg{font-weight:500;color:var(--color-success);font-size:1rem;margin-bottom:1rem;margin-top:0.5rem;}
.primary{font-weight:500;color:var(--color-primary);}

/* 4. Global Form Labels */
label{font-weight:500;color:var(--color-primary);letter-spacing:0.02em;}
label:not(.inline){display:block;margin-bottom:var(--spacing-sm);font-size:0.875rem;}
label.inline{display:inline-flex;align-items:center;margin-bottom:0;cursor:pointer;}
label.inline input[type="radio"]:nth-of-type(2){margin-left:var(--spacing-lg);}

/* 5. Layout Helpers */
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 var(--spacing-md);}
.flex{display:flex;}
.flex-center{display:flex;justify-content:center;align-items:center;background:linear-gradient(135deg,#f9fafb,#e5f0ff);padding:1rem;margin-bottom:1rem;border-radius:var(--radius);}
.grid{display:grid;gap:var(--spacing-md);}
.grid-cols-responsive{grid-template-columns:repeat(1,1fr);}
@media(min-width:600px){.grid-cols-responsive{grid-template-columns:repeat(2,1fr);}}
@media(min-width:900px){.grid-cols-responsive{grid-template-columns:repeat(3,1fr);}}
.mt-sm{margin-top:var(--spacing-sm);}
.mt-md{margin-top:var(--spacing-md);}
.mt-lg{margin-top:var(--spacing-lg);}
.mb-sm{margin-bottom:var(--spacing-sm);}
.mb-md{margin-bottom:var(--spacing-md);}
.mb-lg{margin-bottom:var(--spacing-lg);}

/* 6. Utilities */
.text-center{text-align:center;}
.hidden{display:none!important;}
.visible{display:block!important;}
.small-text{color:var(--color-info);font-size:0.95rem;}

/* 6b. Inline-style replacements for list.php */
.summary-bar{display:flex;align-items:center;justify-content:space-between;}
.summary-icons{display:flex;align-items:center;gap:0.5rem;font-size:1.3rem;line-height:1;}
.share-group{display:inline-flex;align-items:center;white-space:nowrap;}

/* Hover nudge for accordion title bar */
summary{position:relative;margin-left:-4px;padding-left:calc(1em + 4px);transition:transform 0.2s ease-out,background-color 0.15s ease-out,box-shadow 0.15s ease-out;}
summary:hover{transform:translateX(3px) translateY(-1px);background-color:#ebf4ff;}
summary:focus-visible{transform:translateX(0);outline:2px solid rgba(78,149,217,0.6);outline-offset:2px;}

/* Respect users who prefer reduced motion */
@media(prefers-reduced-motion:reduce){
  summary,summary:hover,summary:focus-visible{transition:none;transform:none;}
}

/* tiny utilities */
.ml-auto{margin-left:auto;}

/* 7. Buttons & Actions */
/* Buttons */
.button{display:inline-block;padding:var(--spacing-md) var(--spacing-lg);font-weight:500;border:1px solid transparent;border-radius:999px;cursor:pointer;text-align:center;transition:background-color var(--transition-fast),border-color var(--transition-fast),box-shadow var(--transition-fast),transform var(--transition-fast);margin-bottom:0.5rem;font-size:0.95rem;letter-spacing:0.02em;box-shadow:0 2px 6px rgba(15,23,42,0.08);}
.button-sm{padding:0.4rem 0.9rem;font-size:0.8rem;border-radius:999px;}
.button-md{padding:0.5rem 1rem;font-size:1rem;}
.button-lg{padding:0.75rem 1.3rem;font-size:1.1rem;}
.button-primary{background-color:var(--color-primary);color:#fff;border-color:var(--color-primary);}
.button-primary:hover{background-color:var(--color-primary-hover);border-color:var(--color-primary-hover);box-shadow:0 4px 10px rgba(41,117,193,0.25);transform:translateY(-1px);}
.button-secondary{background-color:var(--color-secondary);color:#fff;border-color:var(--color-secondary);}
.button-secondary:hover{background-color:var(--color-secondary-hover);border-color:var(--color-secondary-hover);box-shadow:0 4px 10px rgba(107,114,128,0.25);transform:translateY(-1px);}
.button-back{background-color:var(--color-header-bg);color:var(--color-primary);border-color:var(--color-primary);border-width:2px;}
.button-back:hover{color:var(--color-primary-hover);border-color:var(--color-secondary-hover);background-color:#c9ddff;box-shadow:0 3px 9px rgba(78,149,217,0.2);transform:translateY(-1px);}
.button-success{background-color:var(--color-success);color:#fff;border-color:var(--color-success);}
.button-success:hover{background-color:var(--color-success-hover);border-color:var(--color-success-hover);box-shadow:0 4px 10px rgba(34,197,94,0.22);transform:translateY(-1px);}
.button-warning{background-color:var(--color-warning);color:#212529;border-color:var(--color-warning);}
.button-warning:hover{background-color:var(--color-warning-hover);border-color:var(--color-warning-hover);box-shadow:0 4px 10px rgba(251,191,36,0.3);transform:translateY(-1px);}
.button-danger{background-color:var(--color-danger);color:#fff;border-color:var(--color-danger);}
.button-danger:hover{background-color:var(--color-danger-hover);border-color:var(--color-danger-hover);box-shadow:0 4px 10px rgba(239,68,68,0.25);transform:translateY(-1px);}
.button-info{background-color:var(--color-info);color:#fff;border-color:var(--color-info);}
.button-info:hover{background-color:var(--color-info-hover);border-color:var(--color-info-hover);box-shadow:0 4px 10px rgba(14,165,233,0.25);transform:translateY(-1px);}
.button+.button{margin-left:var(--spacing-md);}

/* Icons */
.icon{display:inline-block;margin-right:var(--spacing-sm);}
.icon-add::before{content:'+';}
.icon-wizard::before{content:'\2728';}
.icon-edit::before{content:'\270E';}
.icon-delete::before{content:'\2718';}
.icon-copy::before{content:'\1F5CF';}
.icon-download::before{content:'\21E9';}
.icon-revert::before{content:'\21B6';}
.icon-restore::before{content:'\21BB';}
.icon-back::before{content:'\25C0';}

/* Icon Buttons */
.btn-add{background-color:var(--color-success);border-color:var(--color-success);color:#fff;}
.btn-add:hover{background-color:var(--color-success-hover);border-color:var(--color-success-hover);}
.btn-wizard{background-color:var(--color-success);border-color:var(--color-success);color:#fff;}
.btn-wizard:hover{background-color:var(--color-success-hover);border-color:var(--color-success-hover);}
.btn-edit{background-color:var(--color-info);border-color:var(--color-info);color:#fff;}
.btn-edit:hover{background-color:var(--color-info-hover);border-color:var(--color-info-hover);}
.btn-delete{background-color:var(--color-danger);border-color:var(--color-danger);color:#fff;}
.btn-delete:hover{background-color:var(--color-danger-hover);border-color:var(--color-danger-hover);}
.btn-copy{background-color:var(--color-primary);border-color:var(--color-primary);color:#fff;}
.btn-copy:hover{background-color:var(--color-primary-hover);border-color:var(--color-primary-hover);}
.btn-download{background-color:var(--color-primary);border-color:var(--color-primary);color:#fff;}
.btn-download:hover{background-color:var(--color-primary-hover);border-color:var(--color-primary-hover);}

/* Text Actions */
.actions-row{display:flex;border-radius:999px;flex-wrap:wrap;margin-top:0;margin-bottom:1rem;align-items:center;background-color:#eef1f7;padding:0.55em 0.9em;gap:0.5rem;}
.text-action{cursor:pointer;display:inline-flex;align-items:center;text-decoration:none;margin-right:2rem;font-size:0.9rem;color:var(--color-secondary);}
.text-action:hover{color:var(--color-primary);}
.text-add::before{content:'+';margin-right:var(--spacing-sm);}
.text-edit::before{content:'\270E';margin-right:var(--spacing-sm);}
.text-delete::before{content:'\2718';margin-right:var(--spacing-sm);}
.text-copy::before{content:'\1F5CF';margin-right:var(--spacing-sm);}
.text-run::before{content:'\23F5';margin-right:var(--spacing-sm);}
.text-link::before{content:'\29C9';margin-right:var(--spacing-sm);}
.text-outerlink::before{content:'\1F310';margin-right:var(--spacing-sm);}
.text-share::before{content:'\003C\003E';margin-right:var(--spacing-sm);}
.text-revert::before{content:'\21B6';margin-right:var(--spacing-sm);}
.text-restore::before{content:'\21BB';margin-right:var(--spacing-sm);}
.text-wizard::before{content:'\2728';margin-right:var(--spacing-sm);}
.text-save::before{content:'\1F4BE';margin-right:var(--spacing-sm);}
.text-id::before{content:'\1F6C8';margin-right:var(--spacing-sm);}

/* 8. Forms */
.form-group{margin-bottom:var(--spacing-md);}
input[type='text'],input[type='email'],input[type='password'],input[type='url'],textarea,select{width:100%;padding:0.55rem 0.7rem;border:1px solid var(--color-border);border-radius:0.6rem;font-size:0.95rem;transition:border-color var(--transition-fast),box-shadow var(--transition-fast),background-color var(--transition-fast);background-color:#f9fafb;}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 1px rgba(78,149,217,0.25);background-color:#ffffff;}
textarea{color:var(--color-text);min-height:120px;resize:vertical;}
input[type='checkbox'],input[type='radio']{margin-right:0.5rem;cursor:pointer;}
.form-group label:not(.inline){display:block;margin-bottom:var(--spacing-sm);}
.form-group label.inline{display:inline-flex;align-items:center;margin-bottom:0;}

/* 9.a Cards */
.card{width:100%;background:#fff;border-radius:0.9rem;box-shadow:0 2px 8px rgba(15,23,42,0.08);border:1px solid var(--color-border);text-align:left;padding:1rem;box-sizing:border-box;position:relative;}
.card-header{display:flex;justify-content:space-between;align-items:flex-start;}
.card-title{flex:0 0 80%;margin:0;font-weight:600;color:var(--color-dark-blue);font-size:0.95rem;overflow:hidden;white-space:nowrap;mask-image:linear-gradient(to right,black 90%,transparent);-webkit-mask-image:linear-gradient(to right,black 90%,transparent);cursor:pointer;}
.card-icons{display:flex;justify-content:flex-end;align-items:flex-start;gap:0.5rem;flex:1;}
.card-icons button{background:none;border:none;cursor:pointer;font-size:1.35rem;line-height:1;color:var(--color-secondary);}
.card-icons button:hover{color:var(--color-primary);}
.card-description{margin-top:0.5rem;overflow:hidden;font-size:0.9rem;color:#4b5563;}
.card.default .card-description{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;}
.card.editing .card-title{white-space:normal;overflow:visible;mask-image:none;-webkit-mask-image:none;}
.card.editing .card-description{display:block;-webkit-line-clamp:unset;}

/* 9b. Accordion */
details{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);margin-bottom:var(--spacing-md);overflow:hidden;box-shadow:0 2px 6px rgba(15,23,42,0.06);}
summary{list-style:none;position:relative;padding:var(--spacing-md);cursor:pointer;font-weight:500;color:var(--color-text);}
summary::-webkit-details-marker{display:none;}
summary::marker{content:none;}
details[open]>summary::after{transform:translateY(-50%) rotate(180deg);}
details>:not(summary){padding:0 var(--spacing-md) var(--spacing-md);}

/* 10. Tabs */
.tabs{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);display:flex;flex-direction:column;box-shadow:0 2px 6px rgba(15,23,42,0.05);}
.tab-list{list-style:none;display:flex;margin:0;padding:0;margin-bottom:4px;}
.tab{padding:var(--spacing-sm) var(--spacing-md);cursor:pointer;transition:background-color var(--transition-fast),color var(--transition-fast);font-size:0.9rem;color:var(--color-secondary);}
.tab:hover{background-color:#ebf4ff;color:var(--color-primary);}
.tab-active{border-bottom:3px solid var(--color-primary);font-weight:500;color:var(--color-primary);}
.tab:not(.tab-active){border-bottom:0px solid var(--color-border);}
.tab-panel{padding:var(--spacing-md);white-space:pre-wrap;font-size:0.95rem;color:#374151;}

/* 11. Tags */
.tag{display:inline-flex;align-items:center;border-radius:999px;padding:0.35rem 0.65rem;font-size:0.85rem;margin-right:0.25rem;margin-bottom:0.25rem;background-color:#e0ecff;color:#002060;}
.tag-plus,.tag-close{cursor:pointer;}
.tag-plus:hover,.tag-close:hover{filter:brightness(0.97);}
.tag-neutral{background-color:#d1e0ff;color:#002060;}
.tag-plus{background-color:#d1e0ff;color:#002060;}
.tag-plus::before{content:'\002B';margin-right:var(--spacing-sm);}
.tag-close{background-color:#75a3ff;color:#fff;}
.tag-close::before{content:'\2718';margin-right:var(--spacing-sm);}

/* 12. Modal */
.modal{position:fixed;top:0;left:0;right:0;bottom:0;display:none;justify-content:center;align-items:center;z-index:1000;}
.modal.active{display:flex;}
.modal-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background-color:rgba(15,23,42,0.45);}
.modal-content{position:relative;background-color:var(--color-surface);padding:var(--spacing-md);border-radius:var(--radius);width:80%;max-height:80vh;overflow-y:auto;z-index:1;box-shadow:0 10px 28px rgba(15,23,42,0.18);}
.modal-close{background:none;border:none;font-size:2rem;line-height:1;cursor:pointer;float:right;color:var(--color-secondary);}
.modal-close:hover{color:var(--color-primary);}
.modal-content.bigmodal{display:flex;flex-direction:column;position:relative;width:90%;height:90%;max-width:none;max-height:none;border-radius:var(--radius);box-sizing:border-box;padding:var(--spacing-md);background-color:var(--color-surface);overflow:hidden;}
.modal-content.bigmodal .modal-close{position:absolute;top:var(--spacing-md);right:var(--spacing-md);float:none;margin:0;z-index:2;}
.modal-content.bigmodal form{display:flex;flex-direction:column;flex:1;min-height:0;}
.modal-content.bigmodal form>.form-group:nth-of-type(2){display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden;}
.modal-content.bigmodal textarea#fdesc{flex:1;min-height:0;width:100%;box-sizing:border-box;resize:none;}
.modal-content.bigmodal button{width:auto;align-self:flex-start;margin-top:var(--spacing-md);}

/* 13. Hero Section */
.heroprompt{border-radius:var(--radius);box-shadow:0 3px 10px rgba(15,23,42,0.12);text-align:left;padding:2rem 1.2rem;margin-bottom:1.5rem;background:linear-gradient(135deg,#ffffff,#e5f0ff);}

/* 14. Spinner */
.loader{display:inline-block;margin:var(--spacing-md);border:12px solid #e5e7eb;border-top:12px solid var(--color-primary);border-radius:50%;width:60px;height:60px;animation:spin 1.2s linear infinite;vertical-align:middle;}
@keyframes spin{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}

/* 15. Drag and Drop Zone */
#drop_zone{border:2px dashed #d1d5db;border-radius:0.6rem;padding:0.8rem 1rem;text-align:center;cursor:pointer;margin-bottom:1em;background-color:#f9fafb;transition:border-color var(--transition-fast),background-color var(--transition-fast);}
#drop_zone.dragover{border-color:var(--color-primary);background:#ebf4ff;}
#fileName{margin-top:10px;font-style:italic;color:#6b7280;font-size:0.9rem;}

/* 16. Custom Radio Buttons */
.radio-group{display:flex;align-items:center;gap:var(--spacing-md);}
.radio-group input[type="radio"]{appearance:none;width:1rem;height:1rem;border:2px solid var(--color-border);border-radius:50%;cursor:pointer;transition:background-color var(--transition-fast),border-color var(--transition-fast),box-shadow var(--transition-fast);background-color:#ffffff;}
.radio-group input[type="radio"]:checked{background-color:var(--color-primary);border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(78,149,217,0.25);}
.radio-group input[type="radio"]:focus{outline:none;box-shadow:0 0 0 3px rgba(78,149,217,0.3);}

/* 17. Tooltip */
.info-icon{display:inline-block;position:relative;vertical-align:middle;margin-left:0.2em;cursor:help;}
.info-icon::before{content:"\1F6C8";font-size:0.9em;}
.info-icon.has-tooltip::after{content:attr(data-tooltip);position:absolute;bottom:100%;left:50%;transform:translateX(-50%) translateY(-0.5em);white-space:nowrap;padding:0.3em 0.5em;border-radius:0.25em;background:rgba(15,23,42,0.9);color:#fff;font-size:0.8rem;opacity:0;pointer-events:none;transition:opacity 0.15s ease-in-out;z-index:10;}
.info-icon.has-tooltip:hover::after,.info-icon.has-tooltip:focus::after{opacity:1;}

/* Read-only visual state when a prompt is opened in the list */
details.readonly-open{background-color:#f5f5f5;border-color:#e5e5e5;}
details.readonly-open>summary{background-color:#f5f5f5;}
details.readonly-open>:not(summary){background-color:#f5f5f5;}

/* Keep action links/buttons feeling interactive */
details.readonly-open .actions-row a,
details.readonly-open .actions-row button,
details.readonly-open .actions-row input{cursor:pointer;}

/* 19. Footer */
footer{margin-top:auto;background-color:#111827;color:#9ca3af;text-align:center; padding:0.6rem 0 0 0;font-size:0.8rem;}