/* UI_PREMIUM_20261023 高級化外觀層「墨青・香檳・珍珠」— FTT 租賃系統自己的風格（10-23 v4：墨青提亮＋絨布光影） 安東 10-23：「美化高級化，不要動任何欄位」「要有 FTT logo 元素但不要一樣」「背景只有全白高級感不夠」 「學習 fttland.com」「做出自己的風格不要照抄」 ─ 向 fttland.com 學的是「手法」：深色版頭、金屬光澤點綴、細紋理、多層柔陰影。 自己的元素：深墨青主色（官網是絲絨海軍藍）、香檳色（官網是黃金）、建築藍圖格線紋理（官網是絲絨雜訊）、 卡片上緣香檳細條（官網是四角金線）、墨青主按鈕（官網是金色按鈕）、衍生 FTT 標誌（四色環＋墨青圓底＋香檳字）。 ─ 只疊在 style.css 之上，不改任何 HTML；拿掉 base.html／login.html 那一行就完全還原。 ─ 全部包在 @media screen：列印版面一律沿用 style.css，不受影響。 ─ 字型、字重、表頭字距、表格內距一律不改：會讓寬表格每欄變寬（10-23 實測換字型 +9～16px、表頭字距 +9px）， 操作欄被推更遠。 ─ 素材 ftt-mark.png（衍生標誌）／ftt-grid.png（藍圖格線）由 Craft 全家桶 VectorCraft 從 SVG 轉出（dgx2 呼叫 dgx3）。 */ @media screen { :root{ /* 10-23 安東「墨青顏色太深了」⇒ 整體提亮兩到三階（原 #071b1e～#2a8f9b） */ --teal-0:#1a4b52; --teal-1:#1f5960; --teal-2:#25666e; --teal-3:#2d7780; --teal-4:#3a8e98; --teal-5:#58a9b2; /* 10-23 安東「也要表現出絨布光影質感」： pile＝細密絨毛顆粒；nap＝順著一個方向拉長的大塊明暗（順毛／逆毛光影）；sheen＝斜向柔光帶；vignette＝四周微暗 */ --velvet-pile:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.25 .7' numOctaves='3' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E"); --velvet-nap:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0018 .0105' numOctaves='1' seed='19'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 -.24'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --velvet-shade:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cfilter id='s' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0022 .012' numOctaves='1' seed='41'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 .05 0 0 0 0 .06 0 0 0 .6 -.26'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E"); --velvet-sheen:linear-gradient(112deg,transparent 18%,rgba(255,255,255,.07) 34%,rgba(255,255,255,.14) 44%,rgba(255,255,255,.05) 54%,transparent 68%); --velvet-vignette:radial-gradient(ellipse 120% 100% at 50% 35%,transparent 50%,rgba(6,30,34,.30) 100%); --teal-velvet:var(--velvet-pile),var(--velvet-sheen),var(--velvet-nap),var(--velvet-shade),var(--velvet-vignette), linear-gradient(120deg,var(--teal-1) 0%,var(--teal-2) 45%,var(--teal-3) 100%); --pearl-pile:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='q'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1 .65' numOctaves='3' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .3 0 0 0 0 .3 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23q)'/%3E%3C/svg%3E"); --pearl-nap:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cfilter id='r' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0016 .0075' numOctaves='1' seed='27'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 -.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23r)'/%3E%3C/svg%3E"); --champ-hi:#f3e6c9; --champ:#d9bf8f; --champ-mid:#c8a874; --champ-lo:#9a7b45; --champ-sheen:linear-gradient(135deg,#9a7b45 0%,#d9bf8f 30%,#f3e6c9 48%,#c8a874 68%,#e7d3ab 100%); --pearl:#eef1ee; --pearl-2:#e4e9e5; /* 對映到 style.css 的變數 */ --nav:var(--teal-2); --nav-hi:var(--teal-4); --nav-txt:#e8efec; --nav-dim:#d3e3df; --nav-sep:rgba(217,191,143,.22); --bg:var(--pearl); --card:#fbfcfa; --ink:#142224; --muted:#5f6e6b; --line:#d8e0dc; --th:#e9efec; --thg:#dfe7e3; --ring:#c3cfca; --grid-alt:#f4f7f5; --link:#17656e; --radius:14px; --shadow:0 1px 1px rgba(11,35,38,.05),0 4px 10px -2px rgba(11,35,38,.06),0 14px 30px -14px rgba(11,35,38,.18); --shadow-hi:0 1px 1px rgba(11,35,38,.06),0 8px 16px -4px rgba(11,35,38,.10),0 24px 44px -18px rgba(11,35,38,.28); } /* ---- 頁面背景：珍珠灰綠＋藍圖格線＋香檳／墨青光暈 ---- */ body{ background: var(--pearl-pile), linear-gradient(112deg,transparent 20%,rgba(255,255,255,.45) 40%,rgba(255,255,255,.12) 55%,transparent 70%), var(--pearl-nap), radial-gradient(1100px 620px at 106% -12%,rgba(217,191,143,.30),transparent 62%), radial-gradient(1000px 640px at -12% 112%,rgba(45,119,128,.16),transparent 62%), linear-gradient(180deg,rgba(238,241,238,.88),rgba(226,232,228,.92)), url(/static/ftt-grid.png) repeat left top / 96px 96px, var(--pearl); background-attachment:fixed; -webkit-font-smoothing:antialiased; } a{color:var(--link)} a:hover{color:var(--teal-3)} /* ---- 版頭：深墨青＋藍圖格線＋斜向光澤＋香檳細線 ---- */ header{ background: var(--velvet-pile),var(--velvet-sheen),var(--velvet-nap),var(--velvet-shade),var(--velvet-vignette), linear-gradient(180deg,rgba(26,75,82,.10),rgba(26,75,82,.30)), url(/static/ftt-grid.png) repeat right top / 72px 72px, linear-gradient(120deg,var(--teal-1) 0%,var(--teal-2) 45%,var(--teal-3) 100%); border-bottom:2px solid transparent; border-image:linear-gradient(90deg,transparent,var(--champ-mid) 12%,var(--champ-hi) 50%,var(--champ-mid) 88%,transparent) 1; box-shadow:0 12px 28px -14px rgba(20,60,66,.55); } .topbar,nav{background:transparent} .userbox{color:var(--nav-dim)} .userbox a{color:var(--nav-txt)} .userbox a:hover{color:var(--champ-hi)} .userbox .role{background:rgba(217,191,143,.14);color:var(--champ-hi);border:1px solid rgba(217,191,143,.45)} .langswitch .lang{background:rgba(232,239,236,.08);color:var(--nav-txt)} .langswitch .lang:hover{background:rgba(217,191,143,.22);color:#fff} .langswitch .lang.on{background:var(--champ-sheen);color:var(--teal-1);font-weight:700} nav a,nav .grp>span{color:var(--nav-txt)} nav a:hover,nav .grp:hover>span{color:var(--champ-hi)} nav .grp .dd{background:var(--velvet-pile),var(--velvet-sheen),linear-gradient(180deg,var(--teal-2),var(--teal-1)); border:1px solid rgba(217,191,143,.25);border-top:2px solid var(--champ-mid); border-radius:0 0 12px 12px;box-shadow:0 18px 38px -10px rgba(7,27,30,.75)} nav .grp .dd a{border-left:3px solid transparent;transition:background .15s,border-color .15s} nav .grp .dd a:hover{background:linear-gradient(90deg,rgba(42,143,155,.45),rgba(42,143,155,.08)); border-left-color:var(--champ);color:#fff} nav .grp .dd .sect{color:var(--champ);letter-spacing:.6px;border-top-color:rgba(217,191,143,.2)} /* FTT 衍生標誌＋系統名稱：原文字「🏠 FTT 房屋租賃管理系統」仍在 DOM，畫面改由 ::after 依語言顯示 */ .brand a{font-size:0!important;display:inline-flex;align-items:center;gap:12px;text-shadow:none} .brand a::before{content:"";flex:none;width:50px;height:50px; background:url(/static/ftt-mark.png) center/contain no-repeat;filter:drop-shadow(0 3px 6px rgba(0,0,0,.45))} .brand a::after{content:"FTT 房屋租賃管理系統";font-size:24px;font-weight:700;letter-spacing:1px;color:#f4f1e8} html[lang="vi"] .brand a::after{content:"FTT Hệ thống quản lý cho thuê nhà"} .brand a:hover::after{color:var(--champ-hi)} /* ---- 卡片類容器：珍珠白、灰綠細邊、多層柔陰影 ---- */ .bar,.search,.card,.grid,.detail,.chartbox,.imgbox,.total-bar,.formtoolbar,.formhead,.tabpanel{ background-color:var(--card);border:1px solid #dbe3df;box-shadow:var(--shadow)} .bar,.search,.card,.grid,.detail,.chartbox,.imgbox,.total-bar{border-radius:var(--radius)} .formhead .grid,.tabpanel .grid{background:transparent;border:0;box-shadow:none} .bar{background-image:linear-gradient(180deg,#fff,#f7f9f8)} .card{position:relative;overflow:hidden;transition:box-shadow .2s,transform .2s} .card::before{content:"";position:absolute;left:14px;right:14px;top:0;height:3px;border-radius:0 0 3px 3px; background:var(--champ-sheen)} .card.ok::before{background:linear-gradient(90deg,#2e7d4f,#8fcfa5)} .card.warn::before{background:linear-gradient(90deg,#b86e00,#f0c070)} .card.danger::before{background:linear-gradient(90deg,#9e2a22,#e08a80)} .card:hover{box-shadow:var(--shadow-hi);transform:translateY(-1px)} .card .num{color:var(--teal-2);letter-spacing:.3px} .chartbox{background-image:linear-gradient(180deg,#fff,#f8faf9)} /* ---- 標題：墨青→香檳短條 ---- */ h1{color:var(--ink);letter-spacing:.4px} h1::before{content:"";display:inline-block;flex:none;width:5px;height:1.05em;border-radius:3px; background:linear-gradient(180deg,var(--teal-4),var(--champ-mid))} h2{color:var(--teal-2);border-left:4px solid transparent;border-image:linear-gradient(180deg,var(--teal-4),var(--champ-mid)) 1} /* ---- 按鈕：墨青主按鈕＋細光澤；刪除類維持紅色（字重不變，避免撐寬表格） ---- */ .btn,button{background:linear-gradient(180deg,rgba(255,255,255,.10),transparent 55%),linear-gradient(180deg,#3a919b,#2a7a83);color:#fff; box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 2px 5px rgba(11,35,38,.22); transition:filter .15s,box-shadow .15s,transform .1s} .btn:hover,button:hover{background:linear-gradient(180deg,rgba(255,255,255,.14),transparent 55%),linear-gradient(180deg,#43a0aa,#2f858f); box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 6px 14px rgba(23,101,110,.30);color:#fff} .btn:active,button:active{transform:translateY(1px);filter:brightness(.96)} .btn.ghost{background:linear-gradient(180deg,#7c8a87,#66736f)} .btn.ghost:hover{background:linear-gradient(180deg,#879592,#5c6966)} .mini.ghost{background:linear-gradient(180deg,#bf3b31,#992a21)} .mini.ghost:hover{background:linear-gradient(180deg,#c9473d,#8d251d)} .btn:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid var(--champ-mid);outline-offset:2px} /* ---- 輸入欄位（只改外觀，不改尺寸） ---- */ input,select,textarea{transition:border-color .15s,box-shadow .15s} .search input,.search select,.grid input,.grid select,.grid textarea,.pay input,.login-card input{ border-color:var(--ring);border-radius:8px} .search input:focus,.search select:focus,.grid input:focus,.grid select:focus,.grid textarea:focus, .pay input:focus,.login-card input:focus{outline:none;border-color:var(--teal-4);box-shadow:0 0 0 3px rgba(58,142,152,.20)} .grid input[readonly]{background:#f3efe3} /* ---- 資料表：墨青表頭＋香檳底線（內距、字距不變） ---- */ table{box-shadow:var(--shadow);border-radius:10px} th{background:var(--velvet-pile),linear-gradient(112deg,transparent 25%,rgba(255,255,255,.08) 45%,transparent 65%), linear-gradient(180deg,var(--teal-3),var(--teal-2));color:#f8f5ec;border-color:#2f6f77; border-bottom:2px solid var(--champ-mid)} th a{color:var(--champ-hi)} /* 內容列裡當「左側欄位標籤」用的 th（例：線上填寫出租合同）：維持淺底深字。 頁面自己的