:root{--sl-bg-primary: #f5f5f5;--sl-bg-secondary: #ffffff;--sl-bg-tertiary: #f5f5f5;--sl-bg-tertiary-rgb: 245 245 245;--sl-text-primary: #333333;--sl-text-secondary: #666666;--sl-text-tertiary: #888888;--sl-border-light: #eaeaea;--sl-border-medium: #dcdcdc;--sl-border-dark: #cacaca;--sl-shadow-sm: rgba(0, 0, 0, .1);--sl-shadow-md: rgba(0, 0, 0, .15);--sl-shadow-lg: rgba(0, 0, 0, .2);--sl-hover-bg: #f0f0f0;--sl-btn-bg: #ddd;--sl-btn-border: #dcdcdc;--sl-btn-text: #222;--sl-btn-danger-bg: #fdd;--sl-btn-danger-text: #911;--sl-btn-danger-border: #911;--sl-btn-primary-bg: rgb(221, 255, 236);--sl-btn-primary-text: rgb(17, 153, 80);--sl-btn-primary-border: (17, 153, 80);--sl-input-bg: #ffffff;--sl-input-border: #cacaca;--sl-input-text: #666666;--sl-preview-bg: #ffffff;--sl-preview-border: #eaeaea;--sl-add-tile-bg: rgba(128, 128, 128, .05);--sl-add-tile-border: #dcdcdc;--sl-tile-shadow: 0 1px 3px rgba(0, 0, 0, .1);--sl-tile-border: #eaeaea;--sl-bg-opacity: .9}@media(prefers-color-scheme:dark){:root{--sl-bg-primary: #1f1f1f;--sl-bg-secondary: #1a1a1a;--sl-bg-tertiary: #151515;--sl-bg-tertiary-rgb: 21 21 21;--sl-text-primary: #dddddd;--sl-text-secondary: #999999;--sl-text-tertiary: #777777;--sl-border-light: #2f2f2f;--sl-border-medium: #3f3f3f;--sl-border-dark: #4f4f4f;--sl-shadow-sm: rgba(0, 0, 0, .3);--sl-shadow-md: rgba(0, 0, 0, .4);--sl-shadow-lg: rgba(0, 0, 0, .5);--sl-hover-bg: #2f2f2f;--sl-btn-bg: #292929;--sl-btn-border: #3f3f3f;--sl-btn-text: #999999;--sl-btn-danger-bg: #381717;--sl-btn-danger-text: #e43939;--sl-btn-danger-border: #e43939;--sl-btn-primary-bg: rgb(1, 52, 23);--sl-btn-primary-text: rgb(18, 215, 110);--sl-btn-primary-border: rgb(18, 215, 110);--sl-input-bg: #1a1a1a;--sl-input-border: #3f3f3f;--sl-input-text: #999999;--sl-preview-bg: #151515;--sl-preview-border: #2f2f2f;--sl-add-tile-bg: rgba(128, 128, 128, .1);--sl-add-tile-border: #3f3f3f;--sl-tile-shadow: 0 1px 3px rgba(0, 0, 0, .3);--sl-tile-border: #2f2f2f}}*{box-sizing:border-box;margin:0;padding:0}body{margin-top:80px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;background-color:var(--sl-bg-primary);color:var(--sl-text-primary);line-height:1.5;transition:background-color .3s ease,color .3s ease}textarea{font-family:monospace!important}.sl-header{position:fixed;top:0;z-index:100;width:100%;background-color:rgb(var(--sl-bg-tertiary-rgb) / var(--sl-bg-opacity));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:1rem 2rem;border-bottom:1px solid var(--sl-border-dark);display:flex;justify-content:space-between;align-items:center;box-shadow:0 2px 10px var(--sl-shadow-md)}.sl-header h1{color:var(--sl-text-primary);font-size:1.75rem;font-weight:600}.sl-header a{text-decoration:none!important}.sl-header-actions{display:flex;align-items:center;gap:.75rem}.sl-main{padding:2rem;min-height:calc(100vh - 64px)}.sl-grid-container{display:flex;flex-direction:column;gap:1em}.sl-grid-header{display:flex;justify-content:flex-end}.sl-view-toggle{font-size:.9rem;display:flex;align-items:center}.sl-grid{display:grid;gap:2em}.sl-grid.view-desktop{grid-template-columns:repeat(1,1fr)}.sl-grid.view-tablet{grid-template-columns:repeat(2,1fr)}.sl-grid.view-mobile{grid-template-columns:repeat(3,1fr)}.sl-tile{width:100%;background:var(--sl-bg-secondary);border-radius:12px;padding:1.25rem;border:1px solid var(--sl-border-dark);box-shadow:var(--sl-tile-shadow);display:flex;flex-direction:column;gap:10px;transition:transform .2s ease,box-shadow .2s ease,background-color .3s ease,border-color .3s ease}.sl-tile:hover{transform:translateY(-2px);box-shadow:0 4px 12px var(--sl-shadow-md)}.sl-tile-add{display:flex;align-items:center;justify-content:center;cursor:pointer;border-style:dashed;border-color:var(--sl-add-tile-border);background:transparent;flex:0 0 100%;max-width:100%}.sl-tile-add:hover{border-color:gray;background:var(--sl-add-tile-bg)}.sl-tile-add-content{display:flex;flex-direction:column;align-items:center;gap:.5rem;color:var(--sl-text-secondary)}.sl-tile-add-icon{font-size:2rem;font-weight:300;color:gray}.sl-tile-add-text{font-size:.95rem;font-weight:500}.sl-tile-name{font-size:1.1rem;font-weight:600;color:var(--sl-text-primary);margin-bottom:.75rem;padding-bottom:.5rem;border-bottom:2px solid var(--sl-border-light);display:flex;justify-content:space-between;align-items:center}.sl-tile-name-actions{display:flex;gap:.5rem}.sl-preview{border:1px solid var(--sl-preview-border);border-radius:8px;padding:1rem;min-height:100px;margin:.75rem 0;background:var(--sl-preview-bg);overflow:hidden}.sl-preview-container{min-height:100px;overflow-y:auto;border:1px solid var(--sl-preview-border);border-radius:8px;padding:1rem;background:var(--sl-preview-bg);margin:.75rem 0}.sl-grid .sl-preview-container a{cursor:not-allowed;pointer-events:none}.sl-tile-actions{display:flex;gap:.5rem;margin-top:.5rem}.sl-btn{padding:.5rem 1rem;border:1px solid #00000000;border-radius:6px;background:var(--sl-btn-bg);cursor:pointer;font-size:.875rem;transition:all .2s ease;color:var(--sl-btn-text)}.sl-btn:hover{background:var(--sl-btn-bg);border-color:var(--sl-btn-text)}.sl-btn-danger{color:var(--sl-btn-danger-text);background:var(--sl-btn-danger-bg)}.sl-btn-danger:hover{background:var(--sl-btn-danger-bg);border-color:var(--sl-btn-danger-border)}.sl-btn-theme{padding:.5rem 1rem;border:1px solid var(--sl-btn-border);border-radius:6px;background:var(--sl-btn-bg);cursor:pointer;font-size:.875rem;transition:all .2s ease;color:var(--sl-btn-text);display:flex;align-items:center;gap:.5rem}.sl-btn-theme:hover{background:var(--sl-hover-bg);border-color:var(--sl-border-medium)}.sl-edit-screen{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--sl-bg-secondary);display:flex;flex-direction:column;z-index:1000;overflow:auto;color:var(--sl-text-primary)}.sl-edit-header{background:#999;padding:1rem 2rem;border-bottom:1px solid var(--sl-border-dark);display:flex;justify-content:space-between;align-items:center;box-shadow:0 2px 10px var(--sl-shadow-md);flex:0 0 auto}.sl-edit-brand{color:#fff;font-size:1.5rem;font-weight:600;margin:0;cursor:pointer}.sl-edit-brand:hover{opacity:.9}.sl-edit-title{color:#fff;font-size:1.25rem;font-weight:500;opacity:.9}.sl-edit-form{flex:1;display:flex;flex-direction:column;padding:2rem}.sl-edit-container{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;flex:1}.sl-edit-left{display:flex;flex-direction:column;gap:1rem}.sl-edit-right{display:flex;flex-direction:column;gap:1rem;min-height:0}.sl-form-group{display:flex;flex-direction:column;gap:.5rem}.sl-form-label{display:block;font-weight:500;color:var(--sl-text-secondary)}.sl-textarea{width:100%;padding:.75rem;border:1px solid var(--sl-input-border);border-radius:6px;font-family:inherit;font-size:.95rem;resize:none;transition:border-color .2s ease;background-color:var(--sl-input-bg);color:var(--sl-input-text)}.sl-input-name{min-height:auto;height:40px;resize:none}.sl-textarea:focus{outline:none;border-color:gray;box-shadow:0 0 0 3px #80808040}.sl-preview-section{padding:1rem;border:1px dashed var(--sl-border-medium);border-radius:8px;background:var(--sl-bg-tertiary);flex:1;min-height:0;display:flex;flex-direction:column}.sl-preview-container{flex:1;min-height:0;overflow:visible}.sl-preview-section h4{margin-bottom:.75rem;color:var(--sl-text-secondary)}.sl-edit-buttons{display:flex;gap:.75rem;justify-content:flex-end;margin-top:1.5rem}.sl-btn-primary{background:var(--sl-btn-primary-bg);color:var(--sl-btn-primary-text);border-color:var(--sl-btn-primary-border)}.sl-btn-primary:hover{color:var(--sl-btn-primary-bg);background-color:var(--sl-btn-primary-text)}.sl-confirm-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000}.sl-confirm-dialog{background:var(--sl-bg-secondary);border-radius:12px;padding:1.5rem;max-width:400px;width:90%;box-shadow:0 10px 30px var(--sl-shadow-lg);color:var(--sl-text-primary)}.sl-confirm-message{margin:0 0 1.5rem;color:var(--sl-text-secondary);line-height:1.6}.sl-confirm-actions{display:flex;gap:.75rem;justify-content:flex-end}.sl-edit-container.view-desktop{display:flex;flex-direction:column;grid-template-columns:1fr}.sl-edit-container.view-desktop>.sl-edit-right{width:100%;order:-2}.sl-edit-container.view-tablet{display:grid;grid-template-columns:1fr 3fr}.sl-edit-container.view-mobile{display:grid;grid-template-columns:3fr 1fr}
