*{box-sizing:border-box}body{margin:0;background:#f5f6f8;color:#24322f;font:15px system-ui,sans-serif;display:flex;min-height:100vh}aside{width:240px;flex-shrink:0;background:#fff;border-right:1px solid #e3e8e5;padding:30px 22px;display:flex;flex-direction:column}h1{font-size:27px;letter-spacing:-1px;margin:0;color:#215b4a}h2{font-size:29px;letter-spacing:-.8px;margin:8px 0}h3{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:#7c8984;margin-top:32px}.muted,small{color:#75847e}.muted{line-height:1.6}nav{display:grid;gap:6px}button,input,textarea,select{font:inherit}button{cursor:pointer;border:1px solid #dce5e0;border-radius:10px;background:white;padding:11px 14px;color:inherit}button:hover{background:#edf5f0}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #99cdb8;outline-offset:2px}nav button{text-align:left;border:0;background:transparent}.active{background:#e5f1e9!important;color:#205e47!important;font-weight:650}.primary{background:#255f4b;color:white;border-color:#255f4b}.primary:hover{background:#184a38}.aside-note{margin-top:auto;padding-top:40px;line-height:1.8}main{padding:24px 36px;width:100%;max-width:1550px}.notice{background:#fff4dc;color:#78603a;padding:12px 16px;border-radius:10px;font-size:12px;line-height:1.5}header{display:flex;align-items:center;justify-content:space-between;margin:30px 0 24px}header small{letter-spacing:2px;font-size:10px}.search{display:flex;align-items:center;gap:16px;margin-bottom:24px}.search input{max-width:620px;background:white}.search span{color:#75847e;white-space:nowrap;font-size:12px}input,textarea,select{width:100%;padding:12px;border:1px solid #dbe3df;border-radius:9px;color:#24322f;background:#fff}textarea{min-height:80px;resize:vertical}.workspace{display:grid;grid-template-columns:minmax(250px,1fr) minmax(300px,1.1fr);gap:22px}#list{display:flex;flex-direction:column;gap:10px}.record{display:flex;align-items:center;gap:13px;text-align:left;padding:18px;border-color:#e4e8e5}.record.selected{border-color:#549575;box-shadow:0 0 0 1px #549575}.record .icon{height:42px;width:42px;display:grid;place-items:center;background:#eef2fa;color:#4d627e;border-radius:12px;font-weight:700}.record .text{flex:1;min-width:0}.record strong,.record small{display:block;overflow-wrap:anywhere}.record small{margin-top:5px;font-size:12px}article{background:#fff;border:1px solid #e4e8e5;border-radius:16px;padding:28px;align-self:start;min-height:410px}.badge{display:inline-block;padding:6px 10px;background:#edf4ef;border-radius:20px;color:#537060;font-size:11px}.cardhead{display:flex;justify-content:space-between;gap:10px;align-items:start}.field{margin:24px 0}.field small{display:block;margin-bottom:9px}.value{display:flex;align-items:center;gap:8px}.value code,.value span{flex:1;overflow-wrap:anywhere;white-space:pre-wrap}.value button{padding:8px;font-size:12px}.note{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.6}.actions{display:flex;gap:10px;margin-top:28px}.empty{padding:30px;color:#75847e;text-align:center}.back{display:none}dialog{border:1px solid #dce5e0;border-radius:18px;padding:28px;width:min(620px,94vw);max-height:90vh;box-shadow:0 24px 100px #122b3033}dialog::backdrop{background:#172e3b66}label{display:block;margin:15px 0;font-size:13px}label input,label select,label textarea{margin-top:7px}.pair{display:grid;grid-template-columns:1fr 1fr;gap:15px}footer{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}details{background:#f3f6f4;padding:14px;border-radius:10px}summary{cursor:pointer}details textarea{margin:12px 0}#shareFields label{display:flex;align-items:center;gap:10px}#shareFields input{width:auto;margin:0}pre{white-space:pre-wrap;overflow-wrap:anywhere;background:#f4f6f5;padding:18px;border-radius:10px}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#243d33;color:white;border-radius:10px;padding:12px 22px;display:none;z-index:10}@media(max-width:1050px){aside{width:190px;padding:25px 15px}main{padding:20px}.workspace{grid-template-columns:1fr}article{min-height:0}}@media(max-width:650px){body{display:block}aside{width:100%;padding:16px;border-right:0}.aside-note,aside>.muted,aside h3{display:none}aside nav{display:flex;overflow-x:auto;margin-top:10px}aside nav button{white-space:nowrap;padding:9px}#newCategory{margin-top:10px;font-size:12px}main{padding:16px}header{margin:20px 0}h2{font-size:25px}.search{gap:8px}#detail{display:none}body.show-detail #detail{display:block}body.show-detail #list{display:none}.back{display:inline-block;margin-bottom:18px}article{padding:20px}.pair{grid-template-columns:1fr;gap:0}.value{flex-wrap:wrap}.value code{min-width:100%}}

.category-row{display:flex;align-items:center}.category-row button:first-child{flex:1}.category-row button:last-child{padding:10px;color:#947128}#wholeNote{min-height:280px;font-family:monospace}#importer{width:min(760px,94vw)}.mapping{display:flex;flex-wrap:wrap;gap:6px;padding:10px 0;border-bottom:1px solid #eee}.mapping input{flex:1;min-width:150px}.mapping select{width:auto;max-width:100%}header .actions{margin-top:0}@media(max-width:650px){header{align-items:start;gap:10px;flex-direction:column}.category-row{flex-shrink:0}#quickCategories{flex-wrap:wrap}.mapping{display:grid;grid-template-columns:1fr 1fr}.mapping input{min-width:0}aside h3{display:block}}

/* Desktop: fixed application shell; only overflowing content panes scroll. */
@media(min-width:651px){
 html,body{height:100%;height:100dvh;min-height:0;overflow:hidden}
 body{font-size:14px}
 aside{width:224px;height:100%;min-height:0;padding:16px 14px;overflow:hidden}
 aside h1{font-size:25px;flex-shrink:0}
 aside>.muted{font-size:11px;margin:5px 0 12px}
 aside h3{font-size:10px;margin:12px 0 5px;flex-shrink:0}
 aside nav{gap:2px}
 aside nav button{padding:6px 9px;font-size:12px;line-height:1.35}
 #sections{flex-shrink:0}
 #categories{min-height:60px;overflow-y:auto;overscroll-behavior:contain}
 #quickCategories{max-height:16vh;flex-shrink:0;overflow-y:auto}
 .category-row{min-width:0}
 .category-row button:first-child{min-width:0;text-align:left;overflow-wrap:anywhere}
 .category-row button:last-child{padding:6px 8px;flex-shrink:0}
 #newCategory{margin-top:8px;padding:7px 9px;font-size:12px;flex-shrink:0}
 .aside-note{padding-top:8px;font-size:11px;line-height:1.5;flex-shrink:0}
 main{height:100%;min-width:0;padding:16px 22px;display:flex;flex-direction:column;overflow:hidden;max-width:none}
 main>.notice{padding:8px 12px;font-size:11px;flex-shrink:0}
 header{margin:14px 0 12px;gap:12px;flex-shrink:0}
 header>div:first-child{min-width:0}
 header h2{font-size:23px;line-height:1.2;margin:5px 0;overflow-wrap:anywhere}
 header small{font-size:9px}
 header .actions{flex-shrink:0;gap:7px}
 header button{padding:9px 11px;font-size:13px}
 .search{margin-bottom:12px;gap:10px;flex-shrink:0}
 .search input{padding:9px 12px;max-width:none;min-width:0}
 .workspace{flex:1;min-height:0;grid-template-columns:minmax(210px,.9fr) minmax(270px,1.1fr);gap:14px;overflow:hidden}
 #list{min-height:0;overflow-y:auto;gap:7px;padding:2px;overscroll-behavior:contain}
 .record{padding:11px 12px;gap:10px;flex-shrink:0}
 .record .icon{width:34px;height:34px;flex-shrink:0;border-radius:9px}
 .record small{margin-top:3px}
 #detail{height:100%;min-height:0;min-width:0;overflow-y:auto;padding:18px;overscroll-behavior:contain}
 #detail h2{font-size:23px;overflow-wrap:anywhere}
 .badge{padding:4px 8px}
 .field{margin:15px 0}
 .field small{margin-bottom:6px}
 .value{flex-wrap:wrap;gap:6px}
 .value code{min-width:0}
 .value button{padding:6px;font-size:11px}
 .note{line-height:1.45;margin:8px 0}
 #detail>.actions{position:sticky;bottom:-18px;background:white;padding:10px 0;margin-top:14px;flex-wrap:wrap;border-top:1px solid #edf0ee}
 dialog{max-height:calc(100dvh - 32px);overflow-y:auto;padding:22px}
 dialog footer{position:sticky;bottom:-22px;background:white;padding:12px 0;margin-top:12px}
}
@media(min-width:651px) and (max-width:850px){
 aside{width:186px;padding:12px 10px}
 main{padding:12px}
 .workspace{grid-template-columns:minmax(150px,.8fr) minmax(220px,1.2fr);gap:9px}
 #detail{padding:12px}
 header{flex-wrap:wrap}
 .record{padding:9px}.record .icon{display:none}
}
@media(min-width:651px) and (max-height:740px){
 aside>.muted,.aside-note{display:none}
 aside h3{margin-top:8px}
 aside nav button{padding-top:5px;padding-bottom:5px}
 header{margin:10px 0 8px}
 .field{margin:10px 0}
}

#generator{background:#f0f5f2;padding:12px;border-radius:10px;margin:10px 0}#generator .actions{margin-top:8px;flex-wrap:wrap}#duplicateResults button{display:block;width:100%;text-align:left;margin:7px 0}#duplicates{font-size:12px;padding:8px;flex-shrink:0}@media(max-width:650px){.search{flex-wrap:wrap}.search input{flex-basis:100%}}/* Clear navigation and configurable mobile shortcuts. */
.category-heading,.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.category-heading h3{margin:14px 0 8px}.category-heading button{font-size:12px;padding:7px 10px}.quick-row{display:flex;align-items:center;min-width:0;background:#f0f6f3;border-radius:12px}.quick-title{flex:1;min-width:0;color:#246249;font-weight:750!important;overflow-wrap:anywhere}.favorite-toggle{font-size:22px!important;min-width:44px;min-height:44px;padding:6px!important;flex-shrink:0;color:#697b72}.is-favorite{color:#a96b08!important}.record-star{font-size:21px}.record .icon{flex-shrink:0}.category-choice{display:grid;grid-template-columns:minmax(0,1fr) 44px 110px;align-items:center;gap:5px;border-bottom:1px solid #e4ebe7;padding:8px 0}.category-open{text-align:left;border:0;overflow-wrap:anywhere}.category-choice select{padding:8px 4px;font-size:12px}.dialog-heading h2{font-size:24px}.dialog-heading button{flex-shrink:0}#showCategoryForm{margin-top:18px}#categorySlots{display:none}aside h3{color:#354f43;font-weight:750}#categoryDialog{overscroll-behavior:contain}
@media(max-width:650px){
 aside{padding:16px 16px 14px;display:block}aside h1{margin:0}
 aside nav{margin:0;overflow:visible}
 #sections{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;margin-top:18px;background:#f1f4f2;border-radius:12px;padding:4px}
 #sections button{padding:11px 1px;min-width:0;text-align:center;white-space:normal;font-size:12px;line-height:1.25;min-height:44px;border-radius:9px;font-weight:600}
 #sections .active{background:#245e49!important;color:white!important;box-shadow:0 2px 5px #245e4922}
 aside h3,.category-heading h3{font-size:17px;line-height:1.3;letter-spacing:0;text-transform:none;margin:19px 0 10px;color:#293f34;font-weight:750}
 #quickCategories{display:grid;gap:7px}#quickCategories .quick-title{font-size:15px;padding:12px;white-space:normal;line-height:1.4;text-align:left}
 .category-heading button{min-height:40px;margin-top:8px;color:#246249;font-weight:650}
 #categories,#newCategory{display:none}
 #categorySlots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
 #categorySlots button{padding:10px 3px 8px;min-width:0;display:flex;align-items:center;flex-direction:column;gap:6px;white-space:normal;background:#f4f6f5;border:1px solid #e4eae6;border-radius:12px;text-align:center}
 .slot-icon{display:grid;place-items:center;width:32px;height:30px;font-size:25px;color:#376d56}.slot-label{font-size:11px;font-weight:650;line-height:1.3;max-width:100%;overflow-wrap:anywhere}
 main{min-width:0;padding:12px 16px}.notice{font-size:11px;padding:9px 12px}header{margin:16px 0 12px}header h2{font-size:22px;overflow-wrap:anywhere}header .actions{margin:0;gap:8px}header .actions button{font-size:13px;padding:10px 12px}.search{margin-bottom:14px}.search input{min-width:0;font-size:16px}#list{min-width:0}.workspace{min-width:0}.record{padding:13px;gap:10px}.record strong{font-size:15px}.record small{font-size:11px;color:#64766c}.record .icon{width:36px;height:36px;font-size:24px}.record-star{font-size:19px}dialog{padding:18px}#categoryDialog{width:calc(100% - 24px);max-height:88dvh}.category-choice{grid-template-columns:minmax(0,1fr) 40px 94px}.category-open{padding:10px 4px;font-size:13px}.category-choice .favorite-toggle{min-width:40px}#toast{max-width:calc(100% - 24px);width:max-content;font-size:13px} 
}