/* One static artwork for the active category; no blur layers or entrance effects. */
body[data-page=category] main{position:relative;isolation:isolate;padding:0;background:var(--paper);background-image:none}
body[data-page=category] header{position:absolute;z-index:5;top:max(16px,env(safe-area-inset-top));left:24px;right:24px;margin:0;padding:0;background:none;backdrop-filter:none;border:0;border-radius:0;pointer-events:none}
body[data-page=category] header>*{pointer-events:auto}
body[data-page=category] header>div{flex:0 1 auto;padding:8px 14px;border-radius:12px;background:#faf9f5ed}
body[data-page=category] #dateLabel{display:none}
body[data-page=category] header h1{font-size:21px;margin:0}
body[data-page=category] .desktop-tools{margin-left:auto}
body[data-page=category] #headerBack,body[data-page=category] #headerAdd{background:#faf9f5ed;border:1px solid #e5e1e9}
body[data-page=category] #content.category-layout{display:flex;flex-direction:column;gap:0;padding:90px 24px max(18px,env(safe-area-inset-bottom));overflow:hidden}
.category-tabs{position:relative;z-index:3;display:flex;flex:none;align-self:center;gap:4px;padding:4px;background:#faf9f5f5;border:1px solid #e5e1e9;border-radius:15px;margin:0 0 14px;max-width:100%}
.category-tabs button{background:transparent;color:#676172;border-radius:11px;padding:11px 18px;min-height:46px;font-size:13px;line-height:1.5;white-space:nowrap}
.category-tabs button[aria-selected=true]{background:#e9e3ef;color:#4e4165}
.category-tabs button:focus-visible,.scenery-actions button:focus-visible{outline:2px solid #76638d;outline-offset:3px}
.category-scenery{display:flex;flex:1;min-height:0;align-items:flex-end;justify-content:center}
.category-art{position:absolute;inset:0;z-index:-1;display:block;pointer-events:none}
.category-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;animation:none;filter:none}
.scenery-actions{position:relative;z-index:2;display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;margin-bottom:4px;max-width:100%}
.scenery-actions .primary.scenery-add{width:auto;min-height:50px;padding:12px 25px;border-radius:15px;background:#655776;color:#fff;box-shadow:0 3px 14px #32243c1a}
.scenery-actions .timer-row{display:contents!important;margin:0}
.scenery-actions .timer-row .choice{width:auto;min-height:50px;max-width:210px;padding:12px 18px;border-radius:15px;background:#faf9f5f5;border:1px solid #e5e1e9;color:#4e4165}
body[data-page=category] .category-record-panel{display:flex;flex:1;flex-direction:column;min-height:0;min-width:0;width:100%;max-width:1040px;align-self:center;border:0;border-radius:0;padding:0;background:var(--paper);backdrop-filter:none;overflow:hidden}
.category-record-panel .record-panel-tools{flex:none;min-height:0}
.category-record-panel .toolbar{margin:0 0 12px}
.category-record-panel .toolbar input{background:#fff}
.category-record-panel .summary-box{margin:0 0 10px;background:#fff;border:1px solid var(--line);border-radius:12px}
.category-record-panel .summary-content{max-height:25dvh;overflow:auto}
.category-record-panel .list-scroll{min-height:0;flex:1}
body[data-page=category] .category-record-panel .record{background:#fff}
.category-scenery[hidden],body[data-page=category] .category-record-panel[hidden]{display:none!important}
body[data-page=category][data-category-tab=records] header>div{background:none}
body[data-page=category] #editor::backdrop{backdrop-filter:none}
@media(min-width:601px) and (max-width:900px){
 body[data-page=category] header{left:12px;right:12px;gap:6px}
 body[data-page=category] header h1{font-size:18px}
 body[data-page=category] header>div{padding:8px}
 body[data-page=category] header .desktop-tools{gap:3px}
 body[data-page=category] header .desktop-tools>button,body[data-page=category] header .new-menu>summary{padding:10px 8px;font-size:11px}
 body[data-page=category] #headerBack,body[data-page=category] #headerAdd{width:35px;height:35px;flex:none}
}
@media(max-width:600px){
 body[data-page=category] header{left:12px;right:12px;gap:8px;top:max(12px,env(safe-area-inset-top))}
 body[data-page=category] header>div{padding:7px 12px}
 body[data-page=category] header h1{font-size:19px}
 body[data-page=category] #content.category-layout{padding:72px 12px max(14px,env(safe-area-inset-bottom))}
 .category-tabs{align-self:stretch;justify-content:center;margin-bottom:12px;border-radius:13px}
 .category-tabs button{flex:1;padding:10px 6px;font-size:13px;min-height:46px}
 .scenery-actions{gap:8px}
 .scenery-actions .primary.scenery-add,.scenery-actions .timer-row .choice{font-size:13px;min-height:48px;padding:11px 16px;max-width:190px}
 body[data-page=category] #editor{width:calc(100vw - 16px);max-height:min(92dvh,var(--keyboard-height,92dvh));padding:20px;overscroll-behavior:contain;scroll-padding:65px 0 100px}
 body[data-page=category] #editor .modal-head{top:-20px}
 body[data-page=category] #editor .form-actions{position:sticky;bottom:-20px;background:#faf9f5;padding:12px 0 4px;margin-top:18px;z-index:2}
 body[data-page=category] #editor .form-actions .primary{width:auto;min-height:48px;padding:12px 18px;border-radius:12px}
}

/* Shared composer and the same artwork on both category tabs. */
body[data-inline-category=true] #category-scenery{flex-direction:column;align-items:center;justify-content:flex-start;overflow-y:auto;padding:4px 0 24px;gap:14px;overscroll-behavior:contain}
.category-inline-form{position:relative;flex:none;width:min(100%,540px);margin:0 auto;padding:24px;border:1px solid #e5e1e9;border-radius:20px;background:rgba(252,249,243,.94);box-shadow:0 8px 30px #32243c14;color:var(--ink);min-width:0}
.category-inline-form input:not([type=checkbox]):not([type=radio]):not([type=hidden]),.category-inline-form select,.category-inline-form textarea{width:100%;max-width:100%;box-sizing:border-box}
.category-inline-form label{display:block;margin:14px 0 6px}
.category-inline-form textarea{min-height:100px;resize:vertical}
.inline-form-heading h2{margin:6px 0 16px;font-size:23px}
.category-inline-form .form-actions{display:flex;justify-content:flex-end;margin-top:20px}
.inline-add-row{display:flex;justify-content:flex-end;margin:0 0 12px}
.inline-add-row .primary{width:auto;min-height:44px;padding:11px 20px;border-radius:14px}
body[data-page=category] .category-record-panel{background:rgba(252,249,243,.9);padding:14px;border:1px solid #ffffffb0;border-radius:18px}
body[data-page=category] .category-record-panel .record{background:#fffffff2}
body[data-page=category] .category-record-panel .summary-box{background:#ffffffb8}
body[data-page=category] .companion-actions:empty{display:none}
body[data-page=category] .companion-actions{flex:none;display:flex!important;margin:0 auto}
body[data-page=category] .companion-actions .timer-row{display:contents!important}
body[data-page=category] #category-scenery[hidden]{display:none!important}
body[data-page=calendar] main,body[data-page=dreams] main,body[data-page=search] main,body[data-page=settings] main{background:linear-gradient(#fff7,#fff7),url('assets/tools-wide.png') center/cover no-repeat}
body[data-page=calendar] header,body[data-page=dreams] header,body[data-page=search] header,body[data-page=settings] header{background:#fcf9f3e8;border-radius:16px;padding:10px 14px}
body[data-page=calendar] .calendar-controls,body[data-page=calendar] .calendar-records,body[data-page=dreams] .dream-column,body[data-page=settings] .panel{background:#fcf9f3dd;border-radius:16px;padding:16px}
body[data-page=search] .record{background:#fffffff0}
body[data-page=calendar] .demo-note,body[data-page=search] .demo-note,body[data-page=settings] .demo-note{display:none}
@media(max-width:600px){
 .category-inline-form{padding:20px 16px;border-radius:16px}
 .category-inline-form .form-actions .primary{width:100%;min-height:48px}
 body[data-page=category] .category-record-panel{padding:10px}
 body[data-page=calendar] main,body[data-page=dreams] main,body[data-page=search] main,body[data-page=settings] main{background-image:linear-gradient(#fff7,#fff7),url('assets/tools-tall.png')}
}

/* ======================================
   MY LIFE v14｜電腦版六大功能雙欄
   ====================================== */

@media (min-width: 901px) {

  /* 左右兩欄 */
  body[data-page="category"] #content.category-layout {
    display: grid;
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr);
    gap: 18px;
    align-items: stretch;
    padding: 90px 24px 20px;
    overflow: hidden;
  }

  /* 電腦版不需要頁籤 */
  body[data-page="category"] .category-tabs {
    display: none;
  }

  /* 左側：記一筆 */
  body[data-page="category"] #category-scenery {
    display: flex;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    padding: 4px 2px 20px;
  }

  /* 右側：統計與紀錄 */
  body[data-page="category"] #category-records {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  /* 電腦版已經有左側表單，不用重複新增按鈕 */
  body[data-page="category"] .inline-add-row {
    display: none;
  }

  /* 統計內容可以獨立捲動 */
  body[data-page="category"] .summary-content {
    max-height: 29vh;
    overflow-y: auto;
  }

  /* 右側紀錄可以獨立捲動 */
  body[data-page="category"] #listArea {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
  }
}