:root{--bg: #ffffff;--surface: #ffffff;--surface-alt: #f7f5f8;--border: #eae6ec;--text: #2b2530;--text-muted: #756e7d;--accent-soft: #f8b195;--accent: #f67280;--accent-hover: #c06c84;--secondary: #6c5b7b;--navy: #355c7d;--success: #3f9169;--success-soft: rgba(63, 145, 105, .12);--danger: #d64550;--danger-soft: rgba(214, 69, 80, .1);--warning-soft: rgba(248, 177, 149, .35);--radius: 14px;--radius-sm: 10px;--shadow: 0 2px 14px rgba(53, 92, 125, .1);--shadow-lg: 0 12px 40px rgba(53, 92, 125, .18);--tap: 44px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:Segoe UI,system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;min-height:100vh}#app{max-width:1200px;margin:0 auto;padding:1rem}button,input,select,textarea{font-family:inherit}a{color:var(--accent)}.page-title,.admin-title{font-size:1.5rem;font-weight:700;margin-bottom:1.25rem}.site-title{font-size:1.25rem;font-weight:700}.login-btn{display:block;width:100%;min-height:var(--tap);padding:.7rem 1rem;border:none;border-radius:var(--radius);background:var(--accent);color:#fff;font-size:1rem;font-weight:600;cursor:pointer;text-align:center;text-decoration:none;display:flex;align-items:center;justify-content:center;transition:background .15s}.login-btn:hover{background:var(--accent-hover)}.login-btn:disabled{opacity:.5;cursor:not-allowed}.back-link{display:inline-flex;align-items:center;min-height:var(--tap);color:var(--accent);text-decoration:none;font-weight:600;transition:opacity .15s;background:none;border:none;font-size:1rem;cursor:pointer;padding:0}.back-link:hover{opacity:.75}.jump-btn{min-height:var(--tap);padding:.4rem .9rem;border:1px solid var(--accent);border-radius:var(--radius);background:transparent;color:var(--accent);font-size:.85rem;font-weight:600;cursor:pointer;transition:background .15s,color .15s}.jump-btn:hover{background:var(--accent);color:#fff}.admin-delete-btn{display:flex;align-items:center;justify-content:center;min-height:var(--tap);padding:.4rem .9rem;border:1px solid var(--danger);border-radius:var(--radius);background:transparent;color:var(--danger);font-size:.85rem;font-weight:600;cursor:pointer;transition:background .15s,color .15s}.admin-delete-btn:hover{background:var(--danger);color:#fff}.admin-delete-btn:disabled{opacity:.5;cursor:not-allowed}.login-btn svg,.admin-delete-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;margin-right:.4rem;flex-shrink:0}.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:var(--tap);height:var(--tap);border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text-muted);cursor:pointer;transition:background .15s,color .15s,border-color .15s}.icon-btn svg{width:18px;height:18px;stroke:currentColor;fill:none}.icon-btn:hover{color:var(--text);border-color:var(--text-muted);background:var(--surface-alt)}.icon-btn.icon-btn-danger:hover{color:var(--danger);border-color:var(--danger);background:var(--danger-soft)}.icon-btn:disabled{opacity:.5;cursor:not-allowed}.icon-btn-row{display:flex;gap:.5rem}.toolbar{display:flex;justify-content:flex-end;margin-bottom:1rem;gap:.6rem}.new-pattern-btn,.toolbar-btn{width:auto}.site-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;margin-bottom:1.25rem;padding-bottom:.75rem;border-bottom:1px solid var(--border)}.header-logo{display:flex;align-items:center}.header-logo img{height:26px;display:block}.header-nav{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem 1rem}.header-user{color:var(--text-muted);font-size:.9rem}.header-link{min-height:var(--tap);display:inline-flex;align-items:center;color:var(--secondary);text-decoration:none;font-weight:600;font-size:.9rem;transition:opacity .15s}.header-link:hover{opacity:.75}.header-community{color:var(--text)}.header-logout{min-height:var(--tap);padding:.4rem .9rem;border:1px solid var(--border);border-radius:var(--radius);background:transparent;color:var(--text-muted);font-size:.85rem;font-weight:600;cursor:pointer;transition:background .15s,color .15s}.header-logout:hover{background:var(--surface-alt);color:var(--text)}.home-layout{display:block}.sidebar-filters{display:none;background:var(--surface-alt);border-radius:var(--radius);padding:1.25rem;margin-bottom:1rem}.home-layout.sidebar-open .sidebar-filters{display:block}.sidebar-toggle{display:flex;align-items:center;justify-content:center;width:100%;min-height:var(--tap);padding:.6rem 1rem;margin-bottom:1rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text);font-size:.95rem;font-weight:600;cursor:pointer;text-align:center}.sidebar-toggle-icon{margin-right:.4rem}.filter-section{margin-bottom:1rem}.filter-heading{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);margin-bottom:.4rem}.filter-search,.filter-select{width:100%;min-height:var(--tap);padding:.55rem .75rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text);font-size:.95rem;outline:none;transition:border-color .15s}.filter-select{cursor:pointer}.filter-search:focus,.filter-select:focus{border-color:var(--accent)}.filter-reset{width:100%;min-height:var(--tap);margin-top:.5rem;padding:.5rem .75rem;border:1px solid var(--accent);border-radius:var(--radius);background:transparent;color:var(--accent);font-size:.9rem;font-weight:600;cursor:pointer;transition:background .15s,color .15s}.filter-reset:hover{background:var(--accent);color:#fff}.filter-reset.hidden{display:none}.card-grid,.community-grid{display:grid;grid-template-columns:1fr;gap:1rem}.card,.community-card{display:block;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem;text-decoration:none;color:var(--text);box-shadow:var(--shadow);transition:transform .15s,box-shadow .15s}.card:hover,.community-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.card-title,.community-card h2{font-size:1.1rem;margin-bottom:.5rem}.card-labels{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.5rem}.badge{display:inline-block;background:var(--accent-soft);color:#7a3b1f;font-size:.72rem;font-weight:600;padding:.2rem .6rem;border-radius:999px;text-transform:uppercase;letter-spacing:.03em}.card-stars,.detail-stars{margin-bottom:.35rem}.card-rating-count,.detail-rating-count{color:var(--text-muted);font-size:.8rem}.star{color:var(--border);font-size:1rem}.star.filled{color:var(--accent)}.card-date{display:block;font-size:.8rem;color:var(--text-muted)}.community-card p{color:var(--text-muted);font-size:.9rem}.empty{grid-column:1 / -1;text-align:center;color:var(--text-muted);padding:3rem 0;font-size:1.05rem}.detail-page{max-width:800px;margin:0 auto}.detail-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap}.detail-header h1{font-size:1.5rem;margin-bottom:1rem}.detail-actions{display:flex;gap:.6rem}.detail-edit-btn{width:auto;padding:.5rem 1rem}.detail-delete-btn{padding:.5rem 1rem}.detail-video{max-height:65vh;max-width:100%;border-radius:var(--radius);background:#000;display:block;margin:0 auto}.detail-meta{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin:1rem 0 1.5rem}.detail-labels{display:flex;gap:.4rem;flex-wrap:wrap}.detail-meta time{color:var(--text-muted);font-size:.9rem}.detail-notes{background:var(--surface-alt);border-radius:var(--radius);padding:1.25rem}.detail-notes h2{font-size:1.05rem;margin-bottom:.5rem;color:var(--secondary)}.detail-notes p{color:var(--text-muted);line-height:1.7}.video-wrapper{position:relative;margin-bottom:1.25rem}.video-error{background:var(--surface-alt);border:1px dashed var(--accent);border-radius:var(--radius);padding:3rem 1.5rem;text-align:center;color:var(--text-muted)}.video-error p{font-size:1.05rem;margin-bottom:.5rem}.video-error small{font-size:.8rem;opacity:.7;word-break:break-all}.hidden{display:none}.not-found-page{text-align:center;padding:5rem 1.5rem}.not-found-page h1{font-size:3.5rem;color:var(--accent);margin-bottom:.5rem}.not-found-page p{font-size:1.1rem;color:var(--text-muted);margin-bottom:2rem}.login-page{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;text-align:center}.login-logo{margin-bottom:2rem}.login-logo img{height:40px}.login-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:2rem;width:100%;max-width:360px;box-shadow:var(--shadow)}.login-card h2{margin-bottom:1.25rem;font-size:1.2rem}.login-error{color:var(--danger);font-size:.85rem;margin-bottom:.75rem}.admin-table{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;font-size:.9rem}.admin-table th,.admin-table td{padding:.7rem .85rem;text-align:left;vertical-align:middle}.admin-table th{background:var(--surface-alt);font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted)}.admin-table tr+tr{border-top:1px solid var(--border)}.admin-role-select{min-height:var(--tap);padding:.35rem .6rem;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font-size:.85rem;cursor:pointer;outline:none}.admin-role-select:focus{border-color:var(--accent)}.admin-role-select:disabled{opacity:.5;cursor:not-allowed}.admin-loading,.admin-error{text-align:center;padding:2rem;color:var(--text-muted)}.admin-error{color:var(--danger)}.admin-table-container{overflow-x:auto}.admin-section{margin-bottom:2.5rem}.admin-section h2{font-size:1.2rem;margin-bottom:.85rem}.status-badge{display:inline-block;padding:.15rem .6rem;border-radius:999px;font-size:.72rem;font-weight:600}.status-active{background:var(--success-soft);color:var(--success)}.status-invited{background:var(--warning-soft);color:#a15a34}.form-hint{color:var(--text-muted);font-size:.85rem;margin-bottom:.75rem}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#2b253073;display:flex;align-items:flex-end;justify-content:center;z-index:100}.modal{background:var(--surface);width:100%;max-height:92vh;overflow-y:auto;border-radius:var(--radius) var(--radius) 0 0;box-shadow:var(--shadow-lg);padding:1.25rem}.modal-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}.modal-header h2{font-size:1.1rem}.modal-close{flex-shrink:0}.modal-form{display:flex;flex-direction:column;gap:1rem}.modal-actions{display:flex;gap:.75rem;margin-top:.25rem}.modal-actions .login-btn{width:auto;padding-left:1.4rem;padding-right:1.4rem}.modal-actions .btn-ghost{width:auto;min-height:var(--tap);padding:.7rem 1.2rem;border:1px solid var(--border);border-radius:var(--radius);background:transparent;color:var(--text-muted);font-size:1rem;font-weight:600;cursor:pointer}.modal-actions .btn-ghost:hover{background:var(--surface-alt);color:var(--text)}.modal-error{color:var(--danger);font-size:.85rem}.form-label{display:flex;flex-direction:column;gap:.4rem;font-size:.85rem;color:var(--text-muted)}.pattern-form-labels{display:grid;grid-template-columns:1fr;gap:1rem}.detail-engagement{max-width:800px;margin:2rem auto 0;display:flex;flex-direction:column;gap:1.5rem}.rating-widget,.comment-thread{background:var(--surface-alt);border-radius:var(--radius);padding:1.25rem}.rating-widget h2,.comment-thread h2{font-size:1.05rem;margin-bottom:.75rem;color:var(--secondary)}.rating-stars-input{margin-bottom:.75rem}.rating-star-btn{background:none;border:none;color:var(--border);font-size:1.6rem;cursor:pointer;padding:0 .1rem;min-width:var(--tap);min-height:var(--tap);transition:color .15s}.rating-star-btn.filled{color:var(--accent)}.rating-text-input{width:100%;min-height:4rem;padding:.6rem .75rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text);font-family:inherit;font-size:.95rem;resize:vertical;margin-bottom:.75rem}.rating-submit-btn{width:auto;padding:.6rem 1.2rem}.rating-error{color:var(--danger);font-size:.85rem}.comment-list{display:flex;flex-direction:column;gap:1rem;margin-bottom:1.25rem}.comment-item{border-bottom:1px solid var(--border);padding-bottom:.75rem}.comment-meta{display:flex;gap:.6rem;align-items:baseline;margin-bottom:.25rem}.comment-meta time{color:var(--text-muted);font-size:.8rem}.comment-text{color:var(--text);line-height:1.5}.comment-empty{padding:0;text-align:left}.comment-input{width:100%;min-height:3.5rem;padding:.6rem .75rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text);font-family:inherit;font-size:.95rem;resize:vertical;margin-bottom:.5rem}.comment-submit-btn{width:auto;padding:.5rem 1.1rem}.comment-error{color:var(--danger);font-size:.85rem}@media(min-width:640px){#app{padding:2rem 1.5rem}.page-title,.admin-title{font-size:2rem}.site-title{font-size:1.4rem}.header-logo img{height:30px}.home-layout{display:grid;grid-template-columns:220px 1fr;gap:1.5rem;align-items:start}.sidebar-filters{display:block;position:sticky;top:1rem;margin-bottom:0}.sidebar-toggle{display:none}.card-grid,.community-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}.pattern-form-labels{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}.modal-overlay{align-items:center;padding:1.5rem}.modal{max-width:480px;border-radius:var(--radius);max-height:85vh}.modal.modal--wide{max-width:640px}.detail-header h1{font-size:2rem}}