/* パスワード管理だけの見た目（共通デザイン style.css の上に足す。色は変数で書く） */

.boot{display:flex;align-items:center;justify-content:center;gap:10px;padding:64px 16px;color:var(--muted)}
.center{text-align:center;justify-self:center}
.container-narrow:not(.container){margin-left:auto;margin-right:auto;width:100%}
.icon{width:20px;height:20px;flex:none}

/* ---------- ログイン・登録 ---------- */
.auth-wrap{max-width:440px;margin:24px auto 0}
.auth-wrap h1{margin:0 0 4px;font-size:1.4rem}
.auth-wrap p{margin:0}
.auth-icon{justify-self:center;display:grid;place-items:center;width:56px;height:56px;border-radius:16px;background:var(--accent-soft);color:var(--accent)}
.auth-icon .icon{width:28px;height:28px}

.header-user{font-size:.875rem;font-weight:600;color:var(--muted);max-width:10em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:640px){.header-user{display:none}}

/* ---------- 保管庫の一覧（左）と項目（右） ---------- */
.pass-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:24px;align-items:start}
.vault-nav{display:grid;gap:2px;position:sticky;top:calc(var(--header-h) + 16px)}
.vault-btn,.vault-add{display:flex;align-items:center;gap:10px;min-height:var(--tap);padding:0 12px;border:0;border-radius:var(--r);background:none;font:inherit;font-size:.925rem;font-weight:600;color:var(--ink-2);text-align:left;cursor:pointer;width:100%}
.vault-btn:hover,.vault-add:hover{background:var(--surface-2)}
.vault-btn[aria-current]{background:var(--accent-soft);color:var(--accent)}
.vault-btn .icon,.vault-add .icon{width:18px;height:18px;opacity:.8}
.vault-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vault-count{font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums}
.vault-add{color:var(--accent);margin-top:8px;border:1px dashed var(--line-strong)}
@media (max-width:800px){
  .pass-layout{grid-template-columns:1fr;gap:16px}
  /* スマホでは保管庫を横に並べてスクロール */
  .vault-nav{position:static;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px 2px}
  .vault-btn,.vault-add{width:auto;flex:none;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-full);min-height:40px;padding:0 14px}
  .vault-btn[aria-current]{border-color:transparent}
  .vault-add{margin-top:0;border-style:dashed}
  .vault-name{max-width:12em}
}

/* 項目の行：本体（押すと詳細）＋コピーのボタン */
.item-list .item{padding:6px 8px 6px 0;gap:4px;min-height:60px}
.item-open{display:flex;align-items:center;gap:12px;flex:1;min-width:0;min-height:48px;padding:6px 8px 6px 16px;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;border-radius:var(--r-sm)}
.item-open:hover .item-title{color:var(--accent)}
.item-list li:hover{background:var(--surface-2)}
.item-main{display:grid;gap:2px}
.item-sub{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.avatar{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:10px;background:var(--accent-soft);color:var(--accent);font-weight:800;font-size:.95rem}

/* ---------- 詳細 ---------- */
.detail{display:grid}
.detail-row{display:grid;grid-template-columns:96px minmax(0,1fr) auto;align-items:center;gap:4px 12px;padding:10px 0;border-bottom:1px solid var(--line);min-height:56px}
.detail-row:last-child{border-bottom:0}
.detail-label{font-size:.8rem;font-weight:700;color:var(--muted)}
.detail-value{min-width:0;overflow-wrap:anywhere}
.detail-actions{display:flex;gap:2px}
.secret{letter-spacing:.04em}
.notes{white-space:pre-wrap;font-size:.925rem}
.totp{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.totp-code{font-size:1.5rem;font-weight:800;letter-spacing:.06em;color:var(--accent)}
.totp-left{font-size:.8rem;color:var(--muted)}
.totp-left.is-ending{color:var(--danger)}
@media (max-width:480px){
  .detail-row{grid-template-columns:minmax(0,1fr) auto}
  .detail-label{grid-column:1 / -1}
}

.history-item{flex-wrap:wrap;gap:8px}
.history-item .item-sub{white-space:normal}

/* ---------- 入力 ---------- */
.input-actions{display:flex;align-items:center;gap:4px}
.input-actions > input{flex:1;min-width:0}
.meter{height:6px;border-radius:var(--r-full);background:var(--surface-3);overflow:hidden}
.meter span{display:block;height:100%;width:0;border-radius:inherit;transition:width .2s,background-color .2s}
.meter[data-score="1"] span{width:25%;background:var(--danger)}
.meter[data-score="2"] span{width:50%;background:var(--warning)}
.meter[data-score="3"] span{width:75%;background:var(--success)}
.meter[data-score="4"] span{width:100%;background:var(--success)}
.meter-wrap{display:grid;gap:4px}
.add-member{display:flex;gap:8px;flex-wrap:wrap}
.add-member > select:first-child,.add-member > input{flex:1 1 200px;min-width:0}
.add-member > select:not(:first-child){flex:0 1 140px}
.select-sm{width:auto!important;min-height:36px!important;font-size:.875rem!important;padding-top:4px!important;padding-bottom:4px!important}
input[type="range"]{width:100%;accent-color:var(--accent);min-height:var(--tap)}

/* ---------- パスワード生成 ---------- */
.gen-output{display:block;padding:18px 16px;border-radius:var(--r);background:var(--surface-2);border:1px solid var(--line);font-size:1.25rem;font-weight:700;overflow-wrap:anywhere;line-height:1.5;user-select:all}

/* ---------- ダイアログ ---------- */
.modal-wide{width:min(760px,calc(100vw - 32px))}
.modal-form{display:flex;flex-direction:column;max-height:calc(100dvh - 48px)}
.modal-form > .modal-body{flex:1;min-height:0}
.modal-body h3{margin:4px 0 0;font-size:.95rem}
@media (max-width:640px){.modal-wide{width:100%}}

/* 共通デザインの input の指定のほうが強く、検索アイコンと文字が重なるのを防ぐ */
.toolbar .search input[type="search"]:not([type="checkbox"]){padding-left:38px}
/* 変えられない入力欄（招待されたID・名前） */
input[readonly]:not([type="checkbox"]){background:var(--surface-2);color:var(--ink-2)}