/* ============================================================
   codudo 控制台 app.css（/app）—— 表單的樣子跟後台共用 admin.css，這裡只放這一頁自己的
   登入（Google／信箱）、控制台（總覽、編輯內容、發布紀錄、設定）、預覽、發布時的「群筆」畫面。
   守 DESIGN.md 第 2 章：顏色、字級只用 codudo.css 的變數；圓角只有 0 或 var(--r)；切版用 1px 細線
   ============================================================ */
.ap .ink-ad-main.is-wide{width:min(1060px,100%)}
.ap-noscroll{overflow:hidden}

/* ---------- 右上角：誰登入著 ---------- */
.ap-me{display:flex;align-items:center;gap:12px;min-width:0}
.ap-avatar{display:inline-flex;align-items:center;justify-content:center;flex:none;width:34px;height:34px;border-radius:var(--r);
  border:1px solid var(--line-30);font-family:var(--f-mono);font-size:var(--t-note);color:var(--paper)}
.ap-me-mail{min-width:0;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--t-body);color:var(--paper-60)}

/* ---------- 登入 ---------- */
.ap-auth{max-width:440px;margin-top:var(--s2)}
.ap-google{display:flex;align-items:center;justify-content:center;gap:14px;width:100%;min-height:60px;padding:0 28px;
  border:1px solid var(--paper);border-radius:var(--r);background:var(--paper);color:var(--ink-0);cursor:pointer;
  font-family:var(--f-sans);font-size:var(--t-lead);font-weight:600;transition:opacity .2s var(--ease)}
.ap-google:hover{opacity:.86}
.ap-google .g{width:22px;height:22px;flex:none;fill:currentColor}
.ap-or{display:flex;align-items:center;gap:14px;margin:var(--s3) 0 0;font-size:var(--t-body);color:var(--paper-35)}
.ap-or::before,.ap-or::after{content:"";flex:1;height:1px;background:var(--line)}
.ap-auth .ink-ad-field{margin-top:var(--s2)}
.ap-auth .ink-ad-row .ink-btn{width:100%;text-align:center}
.ap-points{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--line);list-style:none;max-width:440px}
.ap-points li{position:relative;padding-left:22px;margin-top:10px;font-size:var(--t-body);line-height:1.7;color:var(--paper-60)}
.ap-points li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:var(--r);border:1px solid var(--paper-60)}

/* ---------- 取名字 ---------- */
.ap-url-preview{margin-top:10px;font-family:var(--f-mono);font-size:var(--t-body);color:var(--paper);overflow-wrap:anywhere}

/* ---------- 控制台：頂部 ---------- */
.ap-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--s2) var(--s3)}
.ap-head-l{min-width:0}
.ap-shop{font-family:var(--f-serif);font-weight:900;font-size:var(--t-h2);line-height:1.15;color:var(--paper);overflow-wrap:anywhere}
.ap-shop:focus{outline:none}
.ap-url{display:inline-block;margin-top:10px;font-family:var(--f-mono);font-size:var(--t-body);color:var(--paper-60);
  overflow-wrap:anywhere;text-decoration:underline;text-underline-offset:5px}
.ap-url:hover{color:var(--paper)}
.ap-head-r{display:flex;flex-wrap:wrap;gap:10px}

/* 分頁：一條細線，選到的那一頁底下一條白線 */
.ap-tabs{display:flex;gap:4px;margin-top:var(--s4);border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.ap-tabs::-webkit-scrollbar{display:none}
.ap-tabs [role="tab"]{position:relative;flex:none;min-height:52px;padding:0 18px;background:none;border:0;cursor:pointer;
  font-family:var(--f-sans);font-size:var(--t-body);color:var(--paper-60);white-space:nowrap}
.ap-tabs [role="tab"]:hover{color:var(--paper)}
.ap-tabs [role="tab"][aria-selected="true"]{color:var(--paper);font-weight:600}
.ap-tabs [role="tab"][aria-selected="true"]::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;background:var(--paper)}
.ap-tabs [role="tab"]:focus-visible{outline:1px solid var(--line-30);outline-offset:-6px}
.ap-tabs .ap-tab-dot{display:inline-block;width:6px;height:6px;margin-left:8px;border-radius:var(--r);background:var(--paper);vertical-align:3px}
.ap-panel{padding-top:var(--s4)}

/* ---------- 總覽 ---------- */
.ap-banner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s2) var(--s3);
  margin-bottom:var(--s3);padding:22px 24px;border:1px solid var(--line-30)}
.ap-banner p{min-width:0;flex:1 1 280px;font-size:var(--t-lead);line-height:1.6;color:var(--paper)}
.ap-banner-act{display:flex;flex-wrap:wrap;gap:10px}

.ap-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ap-stat{min-width:0;padding:22px 22px 24px;border-left:1px solid var(--line)}
.ap-stat:first-child{border-left:0;padding-left:0}
.ap-stat dt{font-family:var(--f-mono);font-size:var(--t-tag);letter-spacing:.24em;color:var(--paper-35)}
.ap-stat dd{display:flex;align-items:center;gap:10px;margin-top:12px;font-family:var(--f-serif);font-weight:900;
  font-size:var(--t-step);line-height:1.2;color:var(--paper)}
.ap-stat small{display:block;margin-top:8px;font-size:var(--t-body);line-height:1.6;color:var(--paper-60)}
/* 狀態的小記號：○ 沒在線上、○• 在線上（標誌的點落下來） */
.ap-mark{position:relative;display:inline-block;flex:none;width:24px;height:20px}
.ap-mark::before{content:"";position:absolute;left:0;top:2px;width:16px;height:16px;border:2px solid var(--paper-35);border-radius:var(--r);box-sizing:border-box}
.ap-mark::after{content:"";position:absolute;right:0;bottom:1px;width:5px;height:5px;border-radius:var(--r);background:var(--paper);transform:scale(0)}
.ap-mark.is-on::before{border-color:var(--paper)}
.ap-mark.is-on::after{transform:none}
.ap-stat.is-wait dd{color:var(--paper-35)}
.ap-checked{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin-top:14px;font-size:var(--t-body);color:var(--paper-35)}

.ap-more{margin-left:14px;font-family:var(--f-sans);font-weight:400;vertical-align:2px}
.ap-plan{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px var(--s3)}
.ap-plan h2{flex:1 1 320px}

/* 發布紀錄：一版一行 */
.ap-log{list-style:none;border-top:1px solid var(--line)}
.ap-log li{display:grid;grid-template-columns:7.5em minmax(0,1fr) auto;align-items:center;gap:8px var(--s2);
  min-height:64px;padding:12px 0;border-bottom:1px solid var(--line);font-size:var(--t-body)}
.ap-log .no{font-family:var(--f-serif);font-weight:900;font-size:var(--t-lead);color:var(--paper)}
.ap-log .what{min-width:0;color:var(--paper-60);line-height:1.6}
.ap-log .what b{font-weight:600;color:var(--paper)}
.ap-log .act{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px 14px}
.ap-log li.is-current .no::after{content:"";display:inline-block;width:6px;height:6px;margin-left:8px;border-radius:var(--r);background:var(--paper);vertical-align:4px}
.ap-log li.is-empty{display:block;color:var(--paper-60)}

/* ---------- 編輯內容 ---------- */
.ap-area{min-height:120px;resize:vertical;line-height:1.6}
.ap-styles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:var(--s3)}
.ap-style{position:relative;display:flex;align-items:center;gap:14px;min-height:72px;padding:12px 18px;border:1px solid var(--line);cursor:pointer}
.ap-style:hover{background:var(--hover)}
.ap-style input{position:absolute;opacity:0;width:1px;height:1px}
.ap-style .m{position:relative;display:block;flex:none;width:30px;height:24px}
.ap-style .m::before{content:"";position:absolute;left:0;top:2px;width:20px;height:20px;border:2px solid var(--paper-35);border-radius:var(--r);box-sizing:border-box}
.ap-style .m::after{content:"";position:absolute;right:0;bottom:1px;width:6px;height:6px;border-radius:var(--r);background:var(--paper);transform:scale(0);transition:transform .2s var(--ease)}
.ap-style:has(input:checked){border-color:var(--paper)}
.ap-style input:checked + .m::before{border-color:var(--paper)}
.ap-style input:checked + .m::after{transform:none}
.ap-style input:focus-visible + .m{outline:1px solid var(--line-30);outline-offset:4px}
.ap-style .t{min-width:0}
.ap-style b{display:block;font-size:var(--t-lead);font-weight:700}
.ap-style small{display:block;font-size:var(--t-body);color:var(--paper-60)}

/* 編輯時一直黏在畫面下面的那一條：現在的狀態＋預覽、儲存、發布 */
.ap-bar{position:sticky;bottom:0;z-index:5;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px var(--s2);
  margin-top:var(--s3);padding:14px 0;border-top:1px solid var(--line);background:var(--ink-0)}
.ap-bar-state{min-width:0;flex:1 1 220px;font-size:var(--t-body);color:var(--paper-60)}
.ap-bar-act{display:flex;flex-wrap:wrap;gap:10px}
.ap-bar .ink-btn{min-height:52px;padding:13px 26px}

.ap-mono{font-family:var(--f-mono);font-size:var(--t-body);color:var(--paper);overflow-wrap:anywhere;margin-top:var(--s2)}
.ink-ad-sec h2 .ink-soon{vertical-align:3px}

/* ---------- 預覽與發布：蓋滿整個畫面 ---------- */
.ap-pv{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;background:var(--ink-0)}
.ap-pv-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px var(--s2);
  padding:12px 24px;border-bottom:1px solid var(--line)}
.ap-pv-bar p{min-width:0;font-size:var(--t-body);color:var(--paper)}
.ap-pv-act{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ap-dev{min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:var(--r);background:none;color:var(--paper-60);
  font-family:var(--f-sans);font-size:var(--t-body);cursor:pointer}
.ap-dev[aria-pressed="true"]{border-color:var(--paper);color:var(--paper)}
.ap-pv-stage{position:relative;flex:1 1 auto;min-height:0;display:flex;justify-content:center;padding:16px}
.ap-pv-stage iframe{display:block;width:100%;max-width:1100px;height:100%;border:1px solid var(--line);background:var(--paper)}
.ap-pv.is-phone .ap-pv-stage iframe{max-width:390px}

/* 發布：上面一條細細的進度線（標誌的點跟著走） */
.ap-run-line{position:relative;flex:1 1 160px;max-width:320px;height:9px}
.ap-run-line::before{content:"";position:absolute;left:0;right:0;top:4px;height:1px;background:var(--line-30)}
.ap-run-line i{position:absolute;left:0;top:4px;width:100%;height:1px;background:var(--paper);transform-origin:0 50%;transform:scaleX(0)}
.ap-run-line b{position:absolute;top:2px;left:0;width:5px;height:5px;margin-left:-2px;border-radius:var(--r);background:var(--paper)}
.ap-run-done{display:flex;flex-wrap:wrap;gap:10px}

@media (max-width:860px){
  .ap-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ap-stat:nth-child(3){border-left:0;padding-left:0}
  .ap-stat:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:560px){
  .ap-me-mail{display:none}
  .ap-styles{grid-template-columns:minmax(0,1fr)}
  .ap-tabs [role="tab"]{padding:0 12px}
  .ap-tabs [role="tab"][aria-selected="true"]::after{left:6px;right:6px}
  .ap-stat{padding:18px 14px 20px}
  .ap-stat dd{font-size:var(--t-lead)}
  .ap-log li{grid-template-columns:minmax(0,1fr) auto}
  .ap-log .no{grid-column:1/-1}
  .ap-bar-act{width:100%}
  .ap-bar .ink-btn{flex:1 1 auto;padding:13px 14px;text-align:center}
  .ap-pv-bar{padding:10px 14px}
  .ap-pv-stage{padding:0}
  .ap-pv-stage iframe{border:0}
  .ap-head-r{width:100%}
  .ap-head-r .ink-btn{flex:1 1 auto;text-align:center}
}
@media (prefers-reduced-motion:reduce){ .ap-style .m::after{transition:none} }