:root{
  --paper:#EDEFEA;
  --card:#FFFFFF;
  --card-line:#DCDFD7;
  --ink:#20241F;
  --ink-soft:#565F53;
  --moss:#4F6B4A;      /* Bio */
  --slate:#4A6B84;     /* Psycho */
  --ochre:#8A6A3D;     /* Social */
  --plum:#6B4A72;      /* Vocational */
  --attn:#8A6A3D;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Zen Kaku Gothic New', sans-serif;
  line-height:1.7;
}
.wrap{max-width:720px;margin:0 auto;padding:32px 20px 80px;}
header{margin-bottom:28px;}
h1{
  font-family:'Zen Old Mincho', serif;
  font-weight:700;
  font-size:28px;
  margin:0 0 6px;
  letter-spacing:0.02em;
}
.sub{color:var(--ink-soft);font-size:13.5px;}
.quad-legend{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap;}

.tab-nav{display:flex;gap:6px;margin-bottom:22px;border-bottom:1px solid var(--card-line);}
.tab-btn{
  flex:1;background:none;border:none;padding:10px 8px 12px;
  font-family:inherit;font-size:14px;color:var(--ink-soft);cursor:pointer;
  border-bottom:2px solid transparent;margin-bottom:-1px;
}
.tab-btn[data-active="1"]{color:var(--ink);font-weight:700;border-bottom-color:var(--moss);}

.quad-pill{
  font-size:11.5px;padding:3px 10px;border-radius:20px;color:#fff;
  font-weight:500;letter-spacing:0.02em;
}
.q-bio{background:var(--moss);}
.q-psy{background:var(--slate);}
.q-soc{background:var(--ochre);}
.q-voc{background:var(--plum);}

section.card{
  background:var(--card);border:1px solid var(--card-line);border-radius:10px;
  padding:20px 22px;margin-bottom:20px;
}
section.card > h2{
  font-family:'Zen Old Mincho', serif;font-size:16.5px;font-weight:700;
  margin:0 0 12px;display:flex;align-items:center;gap:8px;
}
.hint{font-size:12.5px;color:var(--ink-soft);margin:-4px 0 14px;}

.site-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:28px;}
.site-header h1{margin:0 0 6px;}
.logout-form{flex-shrink:0;margin-top:4px;}
.logout-form .secondary{margin-top:0;}
.login-wrap{max-width:440px;}
a.login-google{
  display:inline-block;margin-top:16px;background:var(--ink);color:#fff;border:none;padding:10px 18px;
  border-radius:7px;font-size:14px;font-family:inherit;text-decoration:none;
}

textarea, input[type=date], input[type=text], input[type=file]{
  width:100%;font-family:inherit;font-size:14.5px;padding:10px 12px;
  border:1px solid var(--card-line);border-radius:7px;background:#FBFBF9;
  color:var(--ink);resize:vertical;
}
textarea:focus, input:focus{outline:2px solid var(--moss);outline-offset:1px;}

label.field{display:block;font-size:12.5px;color:var(--ink-soft);margin:14px 0 5px;}
label.field:first-child{margin-top:0;}

.tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px;}
.tag-btn{
  border:1px solid var(--card-line);background:#FBFBF9;padding:6px 13px;
  border-radius:20px;font-size:13px;cursor:pointer;color:var(--ink-soft);font-family:inherit;
}
.tag-btn[data-on="1"]{color:#fff;border-color:transparent;}
.tag-btn.bio[data-on="1"]{background:var(--moss);}
.tag-btn.psy[data-on="1"]{background:var(--slate);}
.tag-btn.soc[data-on="1"]{background:var(--ochre);}
.tag-btn.voc[data-on="1"]{background:var(--plum);}

button.primary{
  margin-top:16px;background:var(--ink);color:#fff;border:none;padding:10px 18px;
  border-radius:7px;font-size:14px;font-family:inherit;cursor:pointer;
}
button.primary:disabled{opacity:0.5;cursor:default;}
button.secondary{
  margin-top:10px;background:none;border:1px solid var(--card-line);color:var(--ink-soft);
  padding:8px 14px;border-radius:7px;font-size:13px;font-family:inherit;cursor:pointer;
}

.entry{padding:12px 0;border-bottom:1px solid var(--card-line);}
.entry:last-child{border-bottom:none;}
.history-more{margin-top:8px;padding-top:8px;border-top:1px dashed var(--card-line);}
.history-more-toggle{
  display:flex;align-items:center;gap:6px;width:100%;
  border:none;background:none;padding:6px 0;margin:0;
  cursor:pointer;font-size:13px;color:var(--ink-soft);font-weight:500;font-family:inherit;text-align:left;
}
.history-more-caret{display:inline-block;transition:transform 0.15s;}
.history-more-toggle.is-open .history-more-caret{transform:rotate(90deg);}
.history-more-body{margin-top:4px;}
.refl-history-item{margin-bottom:10px;border-bottom:1px solid var(--card-line);padding-bottom:10px;}
.refl-history-item:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0;}
.entry-summary{
  display:flex;align-items:baseline;gap:10px;list-style:none;
  color:var(--ink-soft);font-size:13px;
}
.entry-summary::-webkit-details-marker{display:none;}
.entry-summary::before{content:"▸";display:inline-block;margin-right:2px;transition:transform 0.15s;}
.entry[open] > .entry-summary::before{transform:rotate(90deg);}
.entry-date{font-size:12.5px;color:var(--ink-soft);font-weight:500;flex-shrink:0;}
.entry-preview{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);}
.entry-dots{display:flex;gap:5px;flex-shrink:0;align-items:center;}
.dot{width:8px;height:8px;border-radius:50%;}
.dot.bio{background:var(--moss);}
.dot.psy{background:var(--slate);}
.dot.soc{background:var(--ochre);}
.dot.voc{background:var(--plum);}
.entry-body{margin-top:10px;}
.entry-text{font-size:14px;white-space:pre-wrap;}
.entry-actions{display:flex;gap:8px;margin-top:8px;}
.entry-del{border:none;background:none;color:#B8BCB2;cursor:pointer;font-size:12px;padding:0;}
.entry-edit{border:none;background:none;color:var(--ink-soft);cursor:pointer;font-size:12px;padding:0;}
.empty{color:var(--ink-soft);font-size:13.5px;padding:8px 0;}

.refl-block{margin-bottom:16px;}
.refl-block h3{
  font-size:13px;text-transform:uppercase;letter-spacing:0.06em;
  color:var(--ink-soft);margin:0 0 8px;font-weight:500;
}
.pattern-card{
  border-left:3px solid var(--attn);background:#FAF6EF;padding:10px 14px;
  border-radius:0 6px 6px 0;margin-bottom:10px;font-size:13.5px;
}
.pattern-card .p-title{font-weight:700;margin-bottom:3px;}
.pattern-card .p-ref{font-size:12px;color:var(--ink-soft);margin-top:5px;}
.question-card{
  border-left:3px solid var(--slate);background:#F3F6F8;padding:10px 14px;
  border-radius:0 6px 6px 0;margin-bottom:8px;font-size:13.5px;
}
.open-item{padding:10px 0;border-bottom:1px solid var(--card-line);}
.open-item:last-child{border-bottom:none;}
.open-item-summary{
  display:flex;align-items:baseline;gap:10px;list-style:none;
  color:var(--ink-soft);font-size:13px;
}
.open-item-summary::-webkit-details-marker{display:none;}
.open-item-summary::before{content:"▸";display:inline-block;margin-right:2px;transition:transform 0.15s;}
.open-item[open] > .open-item-summary::before{transform:rotate(90deg);}
.open-item-body{margin-top:10px;padding:10px 12px;border-left:3px solid var(--slate);background:#F3F6F8;border-radius:0 6px 6px 0;}
.qa-row{display:flex;align-items:flex-start;gap:8px;margin:4px 0;}
.qa-row .qa-item{flex:1;min-width:0;margin:0;padding:4px 0;}
.qa-item{display:flex;align-items:flex-start;gap:8px;font-size:13.5px;padding:6px 0;cursor:pointer;}
.qa-item input[type=checkbox]{width:auto;margin-top:3px;flex-shrink:0;}
.qa-copy,.qa-copy-all{
  flex-shrink:0;border:1px solid var(--card-line);background:#fff;color:var(--ink-soft);
  border-radius:6px;padding:4px 8px;font-size:11.5px;font-family:inherit;cursor:pointer;line-height:1.3;
}
.qa-copy:hover,.qa-copy-all:hover{color:var(--ink);border-color:var(--ink-soft);}
.refl-block h3 .qa-copy-all{margin-left:8px;vertical-align:middle;font-weight:400;text-transform:none;letter-spacing:0;}
.quad-note{margin-bottom:8px;font-size:13.5px;}
.quad-note b{display:inline-block;width:80px;}
.qa-flash{
  animation:qa-flash 1.6s ease-out;
  border-radius:6px;
}
@keyframes qa-flash{
  0%{background:#F6E7C9;}
  100%{background:transparent;}
}
.status{font-size:12.5px;color:var(--ink-soft);margin-top:8px;}
.error-box{
  background:#FBEFEA;border:1px solid #E0B9A4;color:#7A3B22;
  padding:10px 12px;border-radius:7px;font-size:13px;margin-top:10px;
}
details summary{cursor:pointer;font-size:13px;color:var(--ink-soft);}